Hover in change background image

Question

I want to change the background of the <TD> when the user hovers a link <a> in the <td>

Part of my HTML:

<tr class="menuBarBottomSelected">
<td width="20%">
<a class="menuBarBottomUnselected" href="./url.php">Getting&nbsp;Started</a>
</td>
</tr>

This is my css:

.menuBarBottomSelected{
    background-image: url('/auth/radius/submenu_bg.jpg');
    background-repeat: repeat-x;
    font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
    color : #ffffff;
    border-top:#666666 solid 1px;
}

tr.menuBarBottomUnselected td a:hover{
    color:black;    
    background-image: url('/auth/radius/submenu_bg_hover.jpg');
    background-repeat: repeat-x;}

The html is being generated so I am not sure why they would use the same class for the link and the td. I was able to assign a :hover on the link but only the background of the text changed not the whole <td>

Mohsen · Accepted Answer · 2011-09-15T17:53:49.173

You should display the link as a block and set width and height to 100%; this would fill your td with the anchor element and every pixel of the td will be act as a link(you can click on it). If that's fine then here is the solution:

.menuBarBottomSelected td a{
    display:block;
    width:100%;
    height:100%;
    background-image: url('/auth/radius/submenu_bg.jpg');
    background-repeat: repeat-x;
    font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
    color : #ffffff;
    border-top:#666666 solid 1px;
}

tr.menuBarBottomUnselected td a:hover{
    color:black;    
    background-image: url('/auth/radius/submenu_bg_hover.jpg');
    background-repeat: repeat-x;}

Look at example here: http://jsfiddle.net/mohsen/LnabQ/ This works in any browser

But if you don't want to fill your td with the anchor tag then you need to use JavaScript to add and remove classes to the td. in my knowledge you can't have td:hover

The display block does not fill the whole bg of the the width is fine but the height is still a little screwy. — Denoteone, Sep 15 '11 at 17:46
Maybe your setup is different. margins or... look at my example: http://jsfiddle.net/mohsen/LnabQ/ — Mohsen, Sep 15 '11 at 17:50

score 1 · Answer 2 · edited May 23 '17 at 12:04

1

One way to do this is with an event. Assign onmouseover on the <a> tag to call a function that then changes the background for the parent <td>.

Side note: In the future, a great way to do this with CSS would be with a :parent selector, which, unfortunately, does not currently exist.

EDIT: If you're certain the <td> will only contain the anchor tag, you could just make the :hover apply to the <td>. Then changing backgrounds is no problem.

<tr class="menuBarBottomSelected">
    <td class="menuBarBottomUnselected" width="20%">
        <a href="./url.php">Getting&nbsp;Started</a>
    </td>
</tr>

and...

tr.menuBarBottomUnselected td:hover{
     background-image: url('/auth/radius/submenu_bg_hover.jpg');
     background-repeat: repeat-x;
}

edited May 23 '17 at 12:04

Community

1
1

answered Sep 15 '11 at 17:35

Jonathan M

17,145
9
58
91

If at all possible I would like to do it all in css. – Denoteone Sep 15 '11 at 17:39
I'm not sure it can be done in CSS. See my side note. Maybe some clever SO'er can come up with something that is purely CSS. There is perhaps another way if you're not married to `:hover` on the `` tag. See my edit. – Jonathan M Sep 15 '11 at 17:41
For now this will work. I dont want to run into issues later with 's that have no links changing. But thanks for the feedback and help +1 – Denoteone Sep 15 '11 at 17:49
You mean links changing from unselected to selected, or changing the `href`? – Jonathan M Sep 15 '11 at 17:51

score 1 · Answer 3 · answered Sep 15 '11 at 18:11

1

couldn't you just change the background of the a, like this?

a.menuBarBottomUnselected {background-image: url('/auth/radius/submenu_bg.jpg'); }

a.menuBarBottomUnselected:hover {background-image: url('/auth/radius/submenu_bg_hover.jpg');}

answered Sep 15 '11 at 18:11

TheRealBillyT

113
5

Hover in change background image

3 Answers3

Linked