<style type="text/css">
.btn-operation:hover{
background-color: red;
}
</style>
<table>
<tr><td nowrap="nowrap" >
<div>
<div class="btn-operation" style="width: 80px; overflow: hidden;text-overflow: ellipsis;background-color: yellow;">
<a rel="tab" href="#">test information</a>
</div>
</div>
</td>
</tr>
</table>
鼠标放在div上背景颜色没有改变,原因是因为你把元素的背景色写在了标签内部,所以hover改变背景色的时候就没有生效。
如果需要使hover生效,则需要把该标签的背景色用一个class去包装,而不是写在元素内部就可以了
<style type="text/css">.btn-operation{
background-color: yellow;
}
.btn-operation:hover{
background-color: red;
}
</style>
<table>
<tr><td nowrap="nowrap" >
<div>
<div class="btn-operation" style="width: 80px; overflow: hidden;text-overflow: ellipsis;">
<a rel="tab" href="#">test information</a>
</div>
</div>
</td>
</tr>
</table>