Question

我正在尝试创建一个表，当您将鼠标悬停在一行上时，它会更改其背景和底部边框颜色。另外，我想将同样的边框颜色应用到它的直接兄弟姐妹身上。有没有办法可以单独使用CSS来完成？

HTML

<table>
 <tbody>
  <tr>
   <td>Row 1</td>
  </tr>
  <tr>
   <td>Row 2</td>
  </tr>
  <tr>
   <td>Row 3</td>
  </tr>
 </tbody>
</table>

CSS

table {width: 100%;}

tr {border-top: 1px solid #e6e6e6; height: 40px;}

tr:hover {border-top: 1px solid #cadaee;}

tr:first-child {border-top: none;}

Answer 1

您可以使用adjacent sibling selector，+。

jsFiddle example

tr:hover + tr {
    border-top: 1px solid #cadaee;
    height: 40px;
    background: #ebf4ff;
}

如果您希望在:hover上选择这两个元素，请使用以下内容：

jsFiddle example

tr:hover + tr, tr:hover {
    border-top: 1px solid #cadaee;
    height: 40px;
    background: #ebf4ff;
}

Answer 2

table {width: 100%;}

tr {border-top: 1px solid #e6e6e6; height: 40px;}

tr:hover {border-top: 1px solid #cadaee; height: 40px; background: #ebf4ff;}

tr:hover + tr {border-top: 1px solid #cadaee;} /* Property that's applied to sibling */

tr:first-child {border-top: none;}

Answer 3

Check this fiddle. This code running properly and what you expected. http://jsfiddle.net/webdevkumar/3bmmc/

将特定css属性应用于子元素，同时将鼠标悬停在其上一个兄弟元素上

3 个答案: