时间戳

首页 > 解决方案 > 如何将css悬停样式应用于已赋予其自己样式的子元素

css - 如何将css悬停样式应用于已赋予其自己样式的子元素

问题描述

我有一个包含两个子 div 元素的按钮 div。一个带count班，一个带caption班。

如果我没有为类设置颜色.count，则按钮悬停样式（白色）将应用于计数 div。但是，如果我在类中设置颜色.count，则按钮悬停不再适用于计数类/div。我可以为计数 div 定义悬停样式，但是它仅在光标移动到计数上时应用，而不是整个按钮。如何为计数类设置特定颜色，但在将鼠标悬停在按钮上时仍然有颜色变化（按钮悬停颜色）？

示例代码：

.button {
  margin: 8px;
  padding: 4px;
  border: 1px solid black;
  text-align: center;
  cursor: pointer;
  background-color: lightgrey;
}

.button .count {
  font-size: 30px;
  color: green;
}

.button:hover {
  color: white;
  background-color: gray;
}

.button .count:hover {
  color: white;
}
<div class="container">
  <div class="button">
    <div class="count">
      2
    </div>
    <div class="caption">
      Videos
    </div>
  </div>
</div>

示例演示： https ://codepen.io/raelb/pen/OJWrpKw

标签： css

解决方案

只需在规则中添加第二个针对子元素的选择器.button:hover：

.button {
  margin: 8px;
  padding: 4px;
  border: 1px solid black;
  text-align: center;
  cursor: pointer;
  background-color: lightgrey;
}

.button .count {
  font-size: 30px;
  color: green;
}

.button:hover {
  background-color: gray;
}

.button:hover,
.button:hover .count {
  color: white;
}
<div class="container">
  <div class="button">
    <div class="count">
      2
    </div>
    <div class="caption">
      Videos
    </div>
  </div>
</div>

没有什么强迫你用:hover.

推荐阅读