悬停对<hr>的影响表

我有一个表格，其中包含< hr>，标题和正文。我把悬停效果放在整个表上，但是对于< hr>，只有当鼠标悬停在行上时，鼠标悬停在表上时它才会改变颜色。只要鼠标碰到桌子，我就需要它改变颜色。我尝试了各种各样的东西，但似乎都没有奏效。悬停对<hr>的影响表

当鼠标悬停在桌子上的任何位置时，如何获得< hr>一行以将颜色更改为像表格其余部分一样的白色？ 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; 
}

来源

2014-02-18 anja

<td><hr id="hrr"/></td>

CSS是

table:hover #hrr 
{ 
     border:1px solid blue; 
}

来源

2014-02-18 13:27:01

完美，它的工作好了。非常感谢。 :-) – anja

欢迎@anja –

悬停对<hr>的影响表

回答

相关问题