需要表格单元格中的背景图像和链接文本颜色以将鼠标悬停在表格单元格上（使用CSS）进行更改

Question

Sorry for a novice's question, but I am about to give up having spent whole day on this issue... I have searched this forum for a few hours, but still can't get the thing to work.

Would anyone assist me with CSS solution to the following problem please?

Basically, I have a table cell with an image background and a text link. I need the image and link color to change on mouse hover over this table cell at the same time. My cumbersome code looks about like this:

<table>
  <tr>
    <td width="160" height="36" align="center" valign="middle" class="menuitem1">
       <a href="http://www.samplesite.com">About us</a>
    </td>
  </tr>
</table>`

Then I tried all this in a CSS file:

.menuitem1 {
   border-right-width: 1px;
   border-right-style: solid;   
   border-right-color: #000;
   background-image: url("images/sample.png");
   background-repeat: no-repeat;
   background-position: left;
   padding-left: 17px;
}
.menuitem1 a:link{
   display: block;
   text-decoration: none;
   color: #fff;
}
.menuitem1 a:visited {
   text-decoration: none;
   color: #fff;
}
.menuitem1:hover {
   text-decoration: none;
   background-image: url("images/sample2.png");
   background-repeat: no-repeat;
   background-position: left;
   color: #000;
}
.menuitem1 a:hover {
   text-decoration: none;
   color: #000;
}
.menuitem1 a:active{
   color: #000;
}

The problem is that the text link doesn't follow block attribute. So the the text color changes only when mouse is over it, not over the rest of the cell. Adding width: 100% to .menuitem1 a still leaves 17px on the left ( padding-left ) that is not in the block. And it is even worse with the height: 100% has no effect and fixed height in px aligns the text vertically on top without possibility to change it.

Funny that if I don't have a hyperlink in the cell and have just text there, then this simple piece of code is sufficient for everything to work like a dream:

.menuitem1:hover {
   text-decoration: none;
   background-image: url("images/sample2.png");
   background-repeat: no-repeat;
   background-position: left;
   color: #000;
}

Isn't there a simple solution like that to the problem that occurs after adding a link?

Thank you very much in advance.

Answer 1

What many beginning javascript programmers don't at first realize, is that any list of selectors can be strung together to new selector. So to change the background image, you are right in putting:

.menuitem1:hover {
    background-image: url("images/sample2.png");
    background-repeat: no-repeat;
    background-position: left;

But to select the a element, you should use the following format:

.menuitem1:hover a {
    color: #000;
    text-decoration: none;
    ...
}

Hope this helps!