Question

我有一张图片，上面放着一些文字。

当我将光标悬停在图像上时，我会改变box-shadow的颜色。

不幸的是，当光标到达覆盖在图像顶部的文本时，背景图像会丢失悬停效果。

当光标位于侄子文本元素上时，如何将悬停效果保留在图像上？

HTML

<div class="col-xs-6 col-sm-3">
   <a href="#">
      <img src="http://via.placeholder.com/270x200.png">
      <div class="text-overlay">
         <h2><span>Example</span><br>Overlay<br>Text</h2>
      </div>
   </a>
</div>

CSS

img {
    margin-top: 20px;
    border-radius: 10px;
    box-shadow: 0px 0px 0px 2px #b2b2b2;
}

img:hover {
        box-shadow: 0px 0px 0px 2px #f47c20;
}

.text-overlay {
  color: #fff;
  position: absolute;
  top: 40px;
  left: 32px;
}

示例代码：https://codepen.io/Washable/pen/bLGqbP

Answer 1

将鼠标悬停在a标记上：

Codepen ：https://codepen.io/anon/pen/rJNyQp

＆＃13;

img {
    margin-top: 20px;
    border-radius: 10px;
    box-shadow: 0px 0px 0px 2px #b2b2b2;
}

a:hover img {
        box-shadow: 0px 0px 0px 2px #f47c20;
}

.text-overlay {
  color: #fff;
  position: absolute;
  top: 40px;
  left: 32px;
}

＆＃13;

<div class="col-xs-6 col-sm-3">
   <a href="#">
      <img src="http://via.placeholder.com/270x200.png">
      <div class="text-overlay">
         <h2><span>Example</span><br>Overlay<br>Text</h2>
      </div>
   </a>
</div>

＆＃13;

Answer 2

如果您只想显示文字，可以将pointer-events:none用于文字课.text-overlay。

Stack Snippet

img {
  margin-top: 20px;
  border-radius: 10px;
  box-shadow: 0px 0px 0px 2px #b2b2b2;
}

img:hover {
  box-shadow: 0px 0px 0px 2px #f47c20;
}

.text-overlay {
  color: #fff;
  position: absolute;
  top: 40px;
  left: 32px;
  pointer-events: none;
}

<div class="col-xs-6 col-sm-3">
  <a href="#">
    <img src="http://via.placeholder.com/270x200.png">
    <div class="text-overlay">
      <h2><span>Example</span><br>Overlay<br>Text</h2>
    </div>
  </a>
</div>

Answer 3

建议

永远不要将div放在a标记内，您需要使用内联元素。

内联元素（a，span，strong，em等）可以包含其他内联元素和文本节点。锚可以包含一个span，它可以包含一个文本节点。 Reference

将HOVER设置为a元素。

以下代码段使用text-overlay标记上的h2类。

＆＃13;

img {
  margin-top: 20px;
  border-radius: 10px;
  box-shadow: 0px 0px 0px 2px #b2b2b2;
}

a:hover img {
  box-shadow: 0px 0px 0px 2px #f47c20;
}

.text-overlay {
  color: #fff;
  position: absolute;
  top: 40px;
  left: 32px;
}

＆＃13;

<div class="col-xs-6 col-sm-3">

  <a href="#">
      <h2 class='text-overlay'><span>Example</span><br>Overlay<br>Text</h2>
    <img src="http://via.placeholder.com/270x200.png">
  </a>
</div>

＆＃13;

Answer 4

您需要对css进行一些更改

img {
    margin-top: 20px;
    border-radius: 10px;
    box-shadow: 0px 0px 0px 2px #b2b2b2;
}

a:hover img {
        box-shadow: 0px 0px 0px 2px #f47c20;
}

.text-overlay {
  color: #fff;
  position: absolute;
  top: 40px;
  left: 32px;
  display:block;
}

Answer 5

首先，文本不是img的孩子，而是一个侄子（因为它是div的兄弟）。

无论如何，你可以通过去解决这个问题 .text-overlay { 指针事件：无; }

或调整你的html结构，如其他anwsers所述

当鼠标移动到绝对定位的侄子文本上时，鼠标悬停在图像上

5 个答案:

建议