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

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>

所以我想要的是在 div 的 hover 上设置它的样式，比方说 cursor: pointer 和 bold 带下划线的文本。有什么方法可以为两者制作相同的代码，比如在相同的 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

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

.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>