在div悬停时在div内设置元素样式

Question

我有以下内容：

h3 {
  color: lightseagreen;
}

p {
  color: rgb(0, 0, 0)
}

.section:hover {
  color: rgb(237, 50, 237)
}

<div class="section">
  <h3>Title</h3>
  <p>Lorem Ipsum</p>
</div>

悬停还有更多样式，但为简单起见，我仅包含color属性。

基本上，我希望默认颜色为浅海绿色，但将鼠标悬停在div部分上时，我希望它为粉红色。我想一直保持黑色的p元素。

我知道h3规则集比.section：hover规则集更具体，因此h3不会在悬停时更改。我制定了另一个规则集以应用于h3：hover，但是只有当我将鼠标悬停在h3块上时，它才会改变颜色。

当h3的父对象悬停时，如何才能将粉红色应用于h3？

Answer 1

您需要在其中指定元素。

set_target_properties(${PROJECT_NAME} PROPERTIES ARCHIVE_OUTPUT_NAME "lib${PROJECT_NAME}")

Answer 2

将.section:hover > h3更改为h3 { color: lightseagreen; } p { color: rgb(0, 0, 0) } .section:hover > h3 { color: rgb(237, 50, 237) }。当该部分悬停时，这将更改h3的颜色：

<div class="section">
  <h3>Title</h3>
  <p>Lorem Ipsum</p>
</div>

{{1}}