Question

当鼠标悬停在 img 元素上时，我会显示 3 个元素。

问题是当我将鼠标悬停在图标上时，将鼠标悬停在图像上会中断并且图标开始闪烁。（在图像和图标之间来回悬停）

我知道我可以添加一些这样的类：

.dark-shield {
    pointer-events: none;
}

到图标，它修复了它，但我将无法应用点击事件。如果有人可以提供帮助，我将不胜感激。

这是我的显示代码：

.invisible {
    visibility: hidden;
}

<div class="container transition-3d-hover ">
    <a href="{% url "gallery-post" post.id %}">
            <img id="{{ post.id }}" class="rounded "
                 src="{{ post.photo.url }}"
                 onmouseenter="f(this)"
                 onmouseleave="f(this)"
            >
    </a>
        <i id="complain-icon-{{ post.id }}"
           class=" fas fa-angry complain-box invisible icon-big dark-shield"></i>
        <i id="fav-icon-{{ post.id }}"
           class=" fa fa-hand-point-up like-box  invisible icon-big "></i>
        <i id="score-icon-{{ post.id }}"
           class=" fas fa-heart fav-box invisible icon-big "></i>

</div>


<script>
 function f(e) {
    var complain = "#" + "complain-icon-" + e.id
    var fav = "#" + "fav-icon-" + e.id
    var score = "#" + "score-icon-" + e.id
    $(complain).toggleClass('invisible')
    $(fav).toggleClass('invisible')
    $(score).toggleClass('invisible')
}

</script>

Answer 1

在您的代码中，如您所见，图标不是图像的一部分。因此，当您将它们悬停时，图标会变得不可见。当它们不可见后，您再次将鼠标悬停在图像上，图标就会变得可见。这不断重复。所以，这里有一个代码片段可以解决这个问题：

.img1 {
  width: 100%;
  height: 100%;
}

.icon {
  color: white;
  font-size: 30px;
  position: absolute;
  top: 40%;
  left: 40%;
  display: none;
}

#wrapper {
  float: left; 
  width: 50%;
  height: 30%;
  cursor: pointer;
}

#wrapper:hover .icon {
  display: block;
}

<!DOCTYPE html>
<html>

<head>
  <script src="https://kit.fontawesome.com/a076d05399.js"></script>
</head>

<body>
  <div id="wrapper">
    <img src="https://cdn.mos.cms.futurecdn.net/wtqqnkYDYi2ifsWZVW2MT4-1200-80.jpg" class="img1">
    <i class="fas fa-angry icon"></i>
    <i class="fa fa-hand-point-up icon" style="top: 20%;"></i>
    <i class="fas fa-heart icon" style="left: 10%; top: 20%;"></i>
  </div>
</body>

</html>

请注意：此代码在代码段中可能不起作用，但如果您使用此代码创建新文件，它会起作用。

代码解释

正如我已经解释过的，图标不是图像的一部分。因此，当您悬停它们时，它们会变得不可见。但是，在我的代码中，我插入了图像以及一个 div 中的图标。现在，每当您将 div 悬停时，图标都是可见的。由于图标是同一 div 的一部分，它们将保持可见。

将鼠标悬停在图像上被元素阻挡

1 个答案:

代码解释