Question

我想将鼠标悬停在图像上以设置动画并使用CSS显示文本块。问题是我似乎只能为子元素设置动画。

<div id="does-not-work">
  <p>DOES NOT WORK</p>
  <p>Hover over the image</p>
  <img src="https://3.bp.blogspot.com/-W__wiaHUjwI/Vt3Grd8df0I/AAAAAAAAA78/7xqUNj8ujtY/s1600/image02.png"/>
  <p class="show-bubble">Should display this text</p>
</div>

#does-not-work img:hover .show-bubble{
  max-height: 200px;
}

我的期望是我将鼠标悬停在#does-not-work div内的img元素上，它会改变.show-bubble的最大高度。但它没有。

使用像这样的html结构确实有效：

<div id="does-work">
  <p>DOES WORK</p>
  <p>Hover over the image</p>
  <img src="https://3.bp.blogspot.com/-W__wiaHUjwI/Vt3Grd8df0I/AAAAAAAAA78/7xqUNj8ujtY/s1600/image02.png"/>
  <p class="show-bubble">Should display this text</p>
</div>

#does-work:hover .show-bubble{
  max-height: 200px;
}

这是因为悬停现在位于我想要显示的块的父元素上。问题是我只想在用户将鼠标悬停在图像上而不是整个块时触发动画效果

https://plnkr.co/edit/4qbwdGkW9l5P6WvvtTsP?p=preview

Answer 1

试试这个

#does-not-work img:hover + .show-bubble{
  max-height: 200px;
}

或者

#does-not-work img:hover ~ .show-bubble{
  max-height: 200px;
}

Answer 2

这是因为您有父元素.hover和img标记。所以两个悬停触发器同时发生

Remove this code
#does-not-work img:hover .show-bubble{
  max-height: 200px;
}

#does-work:hover .show-bubble{
  max-height: 200px;
}

And add this code

#does-not-work img:hover ~ .show-bubble{
  max-height: 200px;
}

Answer 3

为了使悬停工作，您需要将代码更改为以下内容：

#does-not-work img:hover + .show-bubble{
  max-height: 200px;
}

当您将鼠标悬停在图像上而不是div时，悬停将会触发。

CSS中的加号（+）运算符是相邻的兄弟选择器。它将在图像之后选择您想要的元素。

CSS悬停图像为兄弟元素

3 个答案: