链接悬停被文本停止答案

【问题标题】：link hover stoped by text链接悬停被文本停止
【发布时间】：2018-04-17 16:57:32
【问题描述】：

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

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;

<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>

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

【问题讨论】：

您的代码中没有 <a> 标记。你至少可以在那里使用整洁按钮。
对不起，我复制了错误的东西
老大，你的 HTML 代码语义不对。 <a> 内不能有任何块元素，你有两个！
另外，你应该确保你在这里展示了这个问题。现在它在我的编辑之后。
我只是尝试一下，抱歉它不起作用。

标签： html css hover

【解决方案1】：

您仅在图像标签上提供了悬停效果，这就是您的悬停效果不适用于文本的原因。因此，不要在图像标签上提供悬停效果在外部 div 上提供悬停效果，它适用于图像和文本。

使用这个：

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

【讨论】：

【解决方案2】：

试试这个

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

而不是这个：

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

【讨论】：

非常感谢它也可以工作。我什至没有想过那样尝试谢谢：D
你好 ;)

【解决方案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>

【讨论】：

非常感谢，它的工作。我还不知道那个事件所以我现在学习新东西谢谢:)
不客气，你可以把我的答案标记为正确答案:)