Javascript 鼠标移动到绝对位置的侄子文本上时，图像上的悬停效果消失

我有一个图像，上面有一些文字

当我将光标悬停在图像上时，我会更改长方体阴影的颜色

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

当光标位于nephew文本元素上时，如何在图像上保持悬停效果

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>

---

示例代码笔：

将鼠标悬停在

a

标记上：

代码笔：

img{
边缘顶部：20px；
边界半径：10px；
盒影：0px 0px 0px 2px#b2b2b2；
}
a:悬停img{
盒影：0px 0px 0px 2px#f47c20；
}
.文本覆盖{
颜色：#fff；
位置：绝对位置；
顶部：40px；
左：32px；
}

---

将鼠标悬停在

a

标记上：

代码笔：

img{
边缘顶部：20px；
边界半径：10px；
盒影：0px 0px 0px 2px#b2b2b2；
}
a:悬停img{
盒影：0px 0px 0px 2px#f47c20；
}
.文本覆盖{
颜色：#fff；
位置：绝对位置；
顶部：40px；
左：32px；
}

---

您需要对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;
}

---

您需要在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;
}

---

如果只想显示文本，可以使用

指针事件：none

指向文本类

.text overlay

堆栈片段

img{
边缘顶部：20px；
边界半径：10px；
盒影：0px 0px 0px 2px#b2b2b2；
}
img：悬停{
盒影：0px 0px 0px 2px#f47c20；
}
.文本覆盖{
颜色：#fff；
位置：绝对位置；
顶部：40px；
左：32px；
指针事件：无；
}

---

如果只想显示文本，可以使用

指针事件：无

指向文本类

。文本覆盖

堆栈片段

img{
边缘顶部：20px；
边界半径：10px；
盒影：0px 0px 0px 2px#b2b2b2；
}
img：悬停{
盒影：0px 0px 0px 2px#f47c20；
}
.文本覆盖{
颜色：#fff；
位置：绝对位置；
顶部：40px；
左：32px；
指针事件：无；
}

建议 切勿将

div

放入

a

标记中，您需要使用内联元素

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

• 将悬停设置为

  a

  元素

下面的代码段在

h2

标记上使用了

文本覆盖

类

img{
边缘顶部：20px；
边界半径：10px；
盒影：0px 0px 0px 2px#b2b2b2；
}
a:悬停img{
盒影：0px 0px 0px 2px#f47c20；
}
.文本覆盖{
颜色：#fff；
位置：绝对位置；
顶部：40px；
左：32px；
}

建议 切勿将

div

放入

a

标记中，您需要使用内联元素

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

• 将悬停设置为

  a

  元素

下面的代码段在

h2

标记上使用了

文本覆盖

类

img{
边缘顶部：20px；
边界半径：10px；
盒影：0px 0px 0px 2px#b2b2b2；
}
a:悬停img{
盒影：0px 0px 0px 2px#f47c20；
}
.文本覆盖{
颜色：#fff；
位置：绝对位置；
顶部：40px；
左：32px；
}

---

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

不管怎样，你可以通过 .文本覆盖{ 指针事件：无； }

---

或者按照其他Anwser中的描述调整html结构，首先，文本不是img的子对象，而是一个侄子对象（因为它是div同级对象的子对象）

不管怎样，你可以通过 .文本覆盖{ 指针事件：无； }

或者按照其他Anwser中的描述调整html结构