Question

帮助我处理悬停链接效果，效果不透明。效果是有效的，但是当我将标题悬停在其中时它会停止效果。这里是css的代码：

＆＃13;

a .hover11 img {
  opacity: 1;
  -webkit-transition: .3s ease-in-out;
  transition: .3s ease-in-out;
}

a .hover11 img:hover {
  opacity: .5;
}

.imagebig {
  position: relative;
  width: 24%;
  /* for IE 6 */
  height: 60%;
  background: #D9138E;
  background: linear-gradient(#D9138E, rgba(0, 0, 0, 0));
  border: solid 1px #FFFFFF;
  display: inline-block;
}

h2 {
  position: absolute;
  bottom: -10px;
  left: 0;
  width: 100%;
  display: block;

＆＃13;

<a href="">
  <div class="imagebig hover11" align="left">
    <img style="width:100%; height:100%" src="//placehold.it/100" alt="" />
    <h2>Kung Fu Panda</h2>
  </div>
</a>

＆＃13;

最后一个是html。反正有没有阻止h2在悬停时停止效果？我已经尝试用户选择它不起作用

Answer 1

试试这个

unique constraint

而不是：

a .hover11:hover img {
    opacity: .5;
}

Answer 2

您只在图片标记上留下了悬停效果，这就是您的悬停效果对文字不起作用的原因。因此，不要在图像标记上添加悬停效果在外部div上添加悬停效果，它既适用于图像也适用于文本。

使用此功能：

a .hover11:hover img {
  opacity: .5;
}

Answer 3

只需添加pointer-events: none;，即可阻止h2

上的悬停效果

a .hover11 img {
  opacity: 1;
  -webkit-transition: .3s ease-in-out;
  transition: .3s ease-in-out;
}

a .hover11 img:hover {
  opacity: .5;
}

.imagebig {
  position: relative;
  width: 24%;
  /* for IE 6 */
  height: 60%;
  background: #D9138E;
  background: linear-gradient(#D9138E, rgba(0, 0, 0, 0));
  border: solid 1px #FFFFFF;
  display: inline-block;
}

h2 {
  position: absolute;
  bottom: -10px;
  left: 0;
  width: 100%;
  display: block;
  pointer-events: none;
}

<a href="">
  <div class="imagebig hover11" align="left">
    <img style="width:100%; height:100%" src="//placehold.it/100" alt="" />
    <h2>Kung Fu Panda</h2>
  </div>
</a>

链接悬停由文本停止

3 个答案: