当将鼠标悬停在CSS中时，如何使不同的元素表现不同？

Question

我想对<tr>下的不同元素进行不同的更改。

例如，我想：

1. 将<tr>的背景颜色更改为黑色
2. 将黑色<p>文字颜色更改为白色
3. 将红色<p>文字颜色更改为蓝色

以下是HTML代码：

<tr class="trhl">               
    <td class = "td1">
        <p class="p1">Hello</p>
        <p class="p2">Enrique!</p>
    </td>
    <td class = "td2">
        <p class="p3">Hi</p>
        <p class="p4">Madonna</p>
    </td>
</tr>

以下是上述的CSS代码：

p.p2 {
    color:#c04848;
}
p.p3{
    color:#c04848;
}

我想在<tr>悬停上实施更改，如下所示：

tr.trh1:hover {
    background-color: black;
}
tr.trh1:hover .p1, .p4{             
    color: white;
}
tr.trh1:hover .p2, .p3{             
    color: blue;
}

如何使用CSS进行上述更改？

Answer 1

似乎你的大问题是表格行上的班级是.trhl而你放了.trh1（tr-h-One）。

p.p2 {
  color: #c04848;
}
p.p3 {
  color: #c04848;
}
.trhl:hover {
  background-color: black;
}
.trhl:hover .p1,
.trhl:hover .p4 {
  color: white;
}
.trhl:hover .p2,
.trhl:hover .p3 {
  color: blue;
}

<table>
  <tr class="trhl">
    <td class="td1">
      <p class="p1">Hello</p>
      <p class="p2">Enrique!</p>
    </td>
    <td class="td2">
      <p class="p3">CSS3 is the ticket</p>
      <p class="p4">Madonna</p>
    </td>
  </tr>
</table>

Answer 2

为什么设置tr.trh1:hover？您应该按类

将鼠标悬停在<p>元素上

tr .p1:hover,.p4:hover {   color:white; }

tr .p2:hover, .p3:hover {  color: blue; }

Answer 3

.trh1:hover {
    background-color: black;
}
.trh1:hover .p1,
.trh1:hover .p4 {
    color: white;
}
.trh1:hover .p2,
.trh1:hover .p3 {
    color: blue;
}

这对你有用