悬停< a> in< td>更改< td>背景图 [英] Hover <a> in <td> change <td> background image

问题描述

当用户悬停链接< a> < TD> 的背景>在< td>

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

部分HTML：

Part of my HTML:

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

这是我的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;}

html正在生成，所以我不知道他们为什么会为链接和td使用相同的类。我能够在链接上分配一个：悬停，但只有文本的背景不是整个< td>

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>

推荐答案

您应该将链接显示为块，并将宽度和高度设置为100％;这将填充你的td与锚元素和td的每个像素将作为一个链接（你可以点击它）。如果没问题，那么这里是解决方案：

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;}

查看示例： http://jsfiddle.net/mohsen/LnabQ/
适用于任何浏览器

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

但是，如果您不想用锚标记填充您的td，则需要使用 JavaScript 向<$ c $添加和删除类C> TD 。据我所知，你不能有 td：hover

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

这篇关于悬停&lt; a&gt; in&lt; td&gt;更改&lt; td&gt;背景图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！