Question

我的图像具有悬停状态，可以改变两件事：它会使图像变暗，并在图像上显示绝对定位的文本。我遇到的问题是，当我将鼠标悬停在文本上时，图像不再显示为暗淡。我也试过在文本中添加悬停状态。图像和悬停文本都是兄弟姐妹，所以我尝试使用〜follow-sibling组合器，如下所示：.hovertext:hover ~ .hoverimg但显然我没有正确使用它。

代码

.wrapper {
  position: relative;
  text-align: center;
}

.hovertext {
  display: none;
  color: white;
  font-size: 30px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}

.wrapper:hover .hovertext {
  display: block;
}

.hoverimg:hover,
.hovertext:hover~.hoverimg {
  filter: brightness(50%);
}

<div class="wrapper">
  <img class="hoverimg" src="https://loremflickr.com/320/240">
  <div class="hovertext">HOVER TEXT</div>
</div>

有没有办法只用CSS显示两种悬停状态？

Answer 1

如果文字上没有悬停或点击事件

，请使用pointer-events:none

Stack Snippet

＆＃13;

.wrapper {
  position: relative;
  text-align: center;
}

.hovertext {
  display: none;
  color: white;
  font-size: 30px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  pointer-events: none;
}

.wrapper:hover .hovertext {
  display: block;
}

.hoverimg:hover,
.hovertext:hover~.hoverimg {
  filter: brightness(50%);
}

＆＃13;

<div class="wrapper">
  <img class="hoverimg" src="https://loremflickr.com/320/240">
  <div class="hovertext">HOVER TEXT</div>
</div>

＆＃13;

如果您计划在文字上添加活动，则可以在img班级悬停

上更改text和.wrapper属性

＆＃13;

.wrapper {
  position: relative;
  text-align: center;
}

.hovertext {
  display: none;
  color: white;
  font-size: 30px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}

.wrapper:hover .hovertext {
  display: block;
}

.wrapper:hover .hoverimg {
  filter: brightness(50%);
}

＆＃13;

<div class="wrapper">
  <img class="hoverimg" src="https://loremflickr.com/320/240">
  <div class="hovertext">HOVER TEXT</div>
</div>

＆＃13;

Answer 2

无法选择前一个元素，即在尝试使用兄弟选择器.hovertext:hover ~ .hoverimg时使用CSS更改前一个元素的样式，在此处使用sibling selector，您需要进行一些更改在您的html标记中，如下所示，

.wrapper {
  position: relative;
  text-align: center;
}

.hovertext {
  display: none;
  color: white;
  font-size: 30px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  z-index: 9;
}

.wrapper:hover > .hovertext {
  display: block;
}

.hoverimg:hover,
.hovertext:hover ~ .hoverimg {
  filter: brightness(50%);
}

<div class="wrapper">
  <div class="hovertext">HOVER TEXT</div>
  <img class="hoverimg" src="https://loremflickr.com/320/240">
</div>

在上面的代码中，我更改了您的HTML标记，因此现在.hoverimg是目标元素的兄弟，即.hovertext，所以现在每当您悬停。hovertext或{{ 1}}它添加了指定的样式。

将悬停状态添加到兄弟

2 个答案: