Question

考虑以下代码（https://codepen.io/raelb/pen/KBEaXq）：

HTML：

<div class="container" >

<a href=hello>
  <div class=block>Notebook
    <span class=count>10</span>
  </div>
</a>

</div>

CSS：

a {
color: black;
text-decoration: none;
}

.block {
display: inline-block;
font-family: 'Roboto', sans-serif;
border: 1px silver solid;
margin-bottom: 4px;
padding: 2px;
padding-right: 4px;
padding-left: 4px;
font-size: 13px;
}

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

.count {
color: green;
display: inline-block;
margin-left: 2px;
padding-left: 4px;
border-left: 1px silver solid;
}

.count:hover{
  color: white;
}

如果.count不包含color属性，那么当我将鼠标悬停在块上时，计数文本将自动变为白色。但是，如果定义了颜色，则当我将鼠标悬停在块上时，计数文本不会受到影响（并且.count:hover选择器也未激活）。

因此，这似乎不一致。一种情况是将悬浮颜色应用于内部跨度，而另一种情况则不应用悬浮颜色。

这是为什么？当我将鼠标悬停在块div上并为.count:hover定义了color属性时，有没有办法使.count应用于计数？

Answer 1

我相信您希望每次将鼠标悬停在方块上时，计数都将变为白色。只要将block元素悬停在上面，只需更改.count的属性即可完成此操作。在CSS中，只要将count元素悬停在其上并且该计数的悬停框小于该块的框，就可以更改计数的颜色。可以通过以下代码代替CSS中的最后一个定义来解决此问题：

    .block:hover .count {
      color: white;
    }

这是一个可行的例子。

a {
  color: black;
  text-decoration: none;
}

.block {
  display: inline-block;
  font-family: 'Roboto', sans-serif;
  border: 1px silver solid;
  margin-bottom: 4px;
  padding: 2px;
  padding-right: 4px;
  padding-left: 4px;
  font-size: 13px;
}

.block:hover {
  background-color: gray;
  color: white;
}

.count {
  color: green;
  display: inline-block;
  margin-left: 2px;
  padding-left: 4px;
  border-left: 1px silver solid;
}

.block:hover .count {
  color: white;
}

<div class="container">

  <a href=hello>
    <div class=block>Notebook
      <span class=count>10</span>
    </div>
  </a>

</div>

您也可以在Codepen here上找到它。

Answer 2

根据CSS特异性规则，完全可以预期您所指的行为不一致。

引用here：

特异性不被继承。如果在段落的父级上声明27个值，甚至添加！important，但分别声明该段落，则将应用在元素上声明的属性。继承不会胜过这样的声明。

这意味着，将鼠标悬停在.block div上时，为.count选择器指定的规则比.block：hover选择器的规则具有更高的优先级，因此，当将鼠标悬停在.block div上时，.count文本将保持绿色，因为该规则：

.count {
    color: green;
}

覆盖规则：

.block:hover {
    color: white;
}

这说明了以下事实：当您忽略.count（颜色：绿色）的颜色规则时，将应用.block：hover颜色规则（颜色：白色），但是当您确实对.count有颜色规则时，则将应用此规则，并且span.count保持绿色。

鉴于CSS规则，您必须将鼠标悬停在.count上，以使颜色变为白色。

TusharDevelops已经回答了如何解决您的实际问题，我只解释其背后的理论。

悬停在内部元素上时行为不一致

2 个答案: