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标签的单元格。如何使用print.gif图像使悬停效果对单元格起作用？

Answer 1

以Dead Man的小提琴和lante的观点为基础，这个演示展示了你可能会看到的东西。悬停状态有效，但图像隐藏了效果。

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

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

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

td {
    padding: 10px;
}

Answer 2

有人提出了一个完美运作的答案。

答案建议使用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;
    }

onMouseOver on不包含带背景图像的单元格

2 个答案: