如何只在部分元素上悬停效果？

Question

我有以下代码：

＆＃13;

＆＃13;

.container {
 padding-top:20px;
}

.container:hover {
 background-color: red;
}

.text {
  padding-top: 20px;
}

.container:before {
content: 'before';
top: 5px;
position: absolute;
}

＆＃13;

<div class='container'>
  <span class='text'>
    My text
  </span>
</div>

＆＃13;

＆＃13;

＆＃13;

我需要之前的＆＃39;作为标题，因此将其作为伪插入，向上移动并通过向div添加填充来创建它。现在，当我将鼠标悬停在div上时，伪也会突出显示，这是我不想要的。

由于它是外部应用程序的皮肤，我将元素添加到dom的可能性非常有限，这是我认为应该做的。如何在没有伪的情况下仅突出显示div的底部？也许有一种更好的方式来伪造伪本身，以便它不会被徘徊？纯CSS赞赏。

Answer 1

要防止背景覆盖填充，请将background-clip: content-box;添加到.container：

.container {
  padding-top: 20px;
  background-clip: content-box;
}

.container:hover {
  background-color: red;
}

.text {
  padding-top: 20px;
}

.container:before {
  content: 'before';
  top: 5px;
  position: absolute;
}

<div class='container'>
  <span class='text'>
    My text
  </span>
</div>

或使用margin-top: 20px;代替填充：

.container {
  margin-top: 20px;
}

.container:hover {
  background-color: red;
}

.text {
  padding-top: 20px;
}

.container:before {
  display: block;
  width: 100%;
  content: 'before';
  top: 5px;
  position: absolute;
}

<div class='container'>
  <span class='text'>
    My text
  </span>
</div>

Answer 2

一个简单的解决方案是在容器类上使用margin-top而不是padding-top。

＆＃13;

＆＃13;

.container {
  margin-top: 30px;
  background-clip: content-box;
}

.container:hover {
  background-color: red;
}

.text {
  padding-top: 20px;
}

.container:before {
  content: 'before';
  top: 5px;
  position: absolute;
}

＆＃13;

<div class='container'>
  <span class='text'>
    My text
  </span>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

您可以尝试使用悬停.text而不是.container并提供＆＃34; initial＆＃34;或＆＃34;透明＆＃34;伪元素的背景。

只需0.02美元： 我希望你明白，至少可以说这一切都很奇怪。它将限制任何进一步的自定义，如font-height等。每次添加新的文本行时，您都需要调整填充或边距或顶部。老实说，我不明白什么样的应用程序有如此严格的皮肤，不能让你添加一个元素。

Answer 4

为什么不使用后代选择器？您也可以在:hover下嵌套。并且display: block;也不需要使用固定大小的边距和填充。

＆＃13;

＆＃13;

.container:hover .text {
  background-color: red;
}

.text {
  display: block; /* or just use a div instead */
}

.container:before {
  content: 'before';
  display: block;
}

＆＃13;

<div class='container'>
  <span class='text'>
    My text
  </span>
</div>

＆＃13;

＆＃13;

＆＃13;