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

时间:2019-10-04 14:14:56

标签: css

我有以下内容:

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?

2 个答案:

答案 0 :(得分:1)

您需要在其中指定元素。

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

答案 1 :(得分:1)

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