css的hover不生效

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