html - onMouseOver on 不使用背景图像覆盖单元格

Question

我希望将onMouseOver效果行应用于整行。

CSS：

tr:hover{       
    background-color: #FFEEC2;
    border-width: 1px 1px 1px 1px;
    border-style: solid;
    border-color: #4B4B6F;
    cursor: default;
}

HTML：

<table>
    <tr onClick="javascript: printit();">
        <td class="MenuImage"><img src="/images/print.gif" width="16" height="16"></td>
        <td class="MenuCaption">Print</td>
    </tr>
</table>

但悬停效果仅适用于带有打印标签的单元格。如何使悬停效果也适用于带有print.gif图像的单元格？

Answer 1

有人想出了一个完美的答案。

答案建议放置 background-image: none;

     tr:hover{       
       background-color: #FFEEC2;
       border-width: 1px 1px 1px 1px;
       border-style: solid;
       border-color: #4B4B6F;
       cursor: default;
       background-image: none;
    }

Answer 2

为了建立在死人的小提琴和兰特的观点上，这个演示展示了你可能会看到的东西。悬停状态有效，但图像隐藏了效果。

http://jsfiddle.net/v4QHQ/12/

一种解决方案可能是在图像周围应用填充：

http://jsfiddle.net/v4QHQ/13/

td {
    padding: 10px;
}