表中 <hr> 的悬停效果
Posted
技术标签:
【中文标题】表中 <hr> 的悬停效果【英文标题】：Hover effect on <hr> in table 【发布时间】：2014-03-18 06:53:11 【问题描述】：我有一个带有
、标题和正文的表格。我将悬停效果放在整个表格上，但是对于
，只有当鼠标悬停在表格上时，它才不会改变颜色。我需要它在鼠标像其他鼠标一样接触桌子时立即改变颜色。我尝试了各种方法，但似乎都没有奏效。
当鼠标悬停在桌子上的任何地方时，如何让
线像其他地方一样将颜色更改为白色？ JSFiddle
html：
<body>
<table>
<thead>
<tr>
<td><hr /></td>
</tr>
</thead>
<thead>
<tr>
<td><a href="#">This is the Header</a></td>
</tr>
</thead>
<tbody>
<tr>
<td><a href="#">some row content</a></td>
</tr>
</tbody>
</table>
</body>
CSS：
hr
border:1px solid;
float:left;
align:left;
width:30%;
background-color:#991f33;
color:#991f33;
hr:hover
background-color:#fff;
color:#fff;
table
border:0;
background-color:#dcdcdc;
text-align:left;
text-decoration:none !important;
padding:20px;
thead tr a
color: #911f33;
tbody tr
font-size:10px;
line-height:19px;
color: #911f33;
table:hover, table:hover a
color:#fff;
background-color:#911f33;
tr a
color:#000;
【问题讨论】：
【参考方案1】：<td><hr id="hrr"/></td>
css 是
table:hover #hrr
border:1px solid blue;
【讨论】：
以上是关于表中 <hr> 的悬停效果的主要内容，如果未能解决你的问题，请参考以下文章