首页 > 代码库 > 一个简单的tr:hover效果

一个简单的tr:hover效果

  昨天,搞项目的时候,在一个小问题上卡了40分钟,现在想想,还是平时比较少去注意一些细节,经过这次,一定要去多注意细节了。

  好了废话不多说,我现在说明下遇到的问题,一个表格中,要求是当鼠标滑过每一行时,该行就有高亮显示,前天写的时候感觉比较简单啊,就是在表格里面的tr加上一个hover样式就行,即是 tr:hover {...} ,这样就行了,当时也成功了。但是昨天项目又有调整,就是要给td一个背景色,我加上了背景色,当时没发现这个高亮的效果已经没了,晚上回来调试的时候老不行当时的想法是样式的优先级的问题,背景色被覆盖了,于是调了半天也没反应,后来,才发现在tr:hover td {...} 这样就行啦。

  我后来用静态页写了下来,看了下,一般来说,如果td没有颜色的话,tr:hover{...} 是可以的,当然如果你想给tr颜色的话,两个是不影响的。 但是,如果td有颜色,即是有css写了背景色的话,tr:hover td {....}这样写hover样式也可以。

  学习就是积累的过程。