Question

所以我的div里面有paragraph和bold，例如：

.tt {
  border: 2px solid;
  text-align: center;
  padding:  0 0 3% 0;
}

<div class="tt">
  <p>This text stays quiet</p>
  <b>But this underlines</b>
 </div>

所以我想要的是hover那个div样式，让我们说cursor: pointer和粗体文字加下划线。有没有办法为两者制作相同的代码，比如两个元素的div:hover样式相同？

- 编辑 -

#tt {
  text-align: center;
  border: 2px solid; 
  padding: 3% 0 3% 0;
}

<div id="tt">
  Now this underlines<br>
  <b>but this stays quiet</b>
</div>

Answer 1

是的，您可以轻松实现这一目标。现场演示如下。

请记住，更改:hover上的光标并不能真正达到目的，因为您可以将cursor: pointer设置为始终位于该元素上，并且您具有相同的效果

.tt {
  border: 2px solid;
  text-align: center;
  padding:  0 0 3% 0;
}

.tt:hover {
  cursor: pointer;
}

.tt:hover b {
  text-decoration: underline;
}

<div class="tt">
  <p>This text stays quiet</p>
  <b>But this underlines</b>
 </div>

Answer 2

您可以为悬停元素的所有子项添加样式。像这样：

.tt {
  border: 2px solid;
  text-align: center;
  padding:  0 0 3% 0;
  cursor: pointer;
}

.tt:hover b {
  text-decoration: underline;
}

<div class="tt">
  <p>This text stays quiet</p>
  <b>But this underlines</b>
 </div>

如何悬停元素样式本身和另一个元素

2 个答案: