使用 Javascript 悬停时图像叠加在图像上答案

【问题标题】：Image on image overlay on hover with Javascript使用 Javascript 悬停时图像叠加在图像上
【发布时间】：2017-06-14 19:45:46
【问题描述】：

我有一个 php sql 查询，它会生成很多图像，我需要一个代码，在悬停时将半透明图像覆盖在原始图像之上。

我已经看到了很多使用 CSS 来完成此操作的代码，但这会添加大量我认为不需要的 html 代码。该查询最多可以返回 4000 个 40x40 图像的结果，我只需要一张叠加图像就可以在悬停时叠加所有这些结果（只有一个悬停）。

所以从技术上讲，这就是我所需要的

Javascript

find class or id iconoverlay
onhover overlay this transparent image

HTML

<img src="" class or id="iconoverlay" />

我目前在我的网站中使用 JQuery，但我不熟悉 javascript。

【问题讨论】：

请不要让 SO 给你写代码...
你要不要做出贡献或者找点更好的事情做。

标签： javascript jquery html css image

【解决方案1】：

如果你有一个跨度，一个或类似的块标签包装img。你可以这样做：

<a class="imgHover" href="#"><img src="" /></a>

<style>
    .imgHover { display: inline-block; position: relative;}
    .imgHover:after {content:''; width: 100%; height: 100%; background: #000 url('MyPlaceholderURI.jpg') no-repeat center center; display: block; position: absolute; top: 0; left: 0; opacity: 0; transition: opacity .5s linear; }
    .imgHover:hover:after {opacity: 1}
</style>

您可以在此处查看此操作： https://codepen.io/fabioarantes89/pen/rwMqNE

【讨论】：

我似乎无法让它工作。我不需要特殊效果，这些代码所做的只是在我的图像上放置一个黑盒子。我删除了 #000 但没有任何反应。
请在 CodePen.io 上查看实际操作。在 StackOverflow 中，我没有编写任何图像 uri。
我几乎复制并粘贴了该代码，但是我的叠加图像仍然没有显示。叠加层只是一个具有透明中心的边框。我唯一能想到的可能是我需要图像文件的完整路径（即localhost/img/iconhover.png 而不是/img/iconhover.png）
不是覆盖图的路径问题。这很奇怪，我的代码和你的代码没有任何区别。可能是因为它在 JQuery UI 选项卡中的 JQuery DataTables 中吗？实际代码位于标签之间
这是img src 这是css .imgHover { display: inline-block;位置：相对；} .imgHover：在{内容：''之后；宽度：100%；高度：100%；背景：#000 url('localhost/img/iconhover.png') 无重复中心中心；显示：块；位置：绝对；顶部：0；左：0；不透明度：0；过渡：不透明度 .5s 线性； } .imgHover:hover:after {opacity: 1}

【解决方案2】：

这里有一些代码可以在悬停在元素上时浮动 div：

function createTooltips(elem) {
  if (!elem.getAttribute) return;
  if (elem.getAttribute('tooltip')) {

    $(elem).hover(
      function (event) {
        $('#tt').html(this.getAttribute('tooltip'));
        $('#tt').css('left',(event.pageX + 10) + 'px');
        $('#tt').css('top',event.pageY + 'px');
        $('#tt').show();
      },
      function (event) {
        $('#tt').hide();
      });

  }
  for (var i = 0; i < elem.childNodes.length; i++) {
    createTooltips(elem.childNodes[i], num);
  }
}

createTooltips(document.body[0]);

如果将您的 img 标签放入 "tooltip=" 属性并添加到您的页面中，您需要做的就是

【讨论】：

我试图避免将悬停 img src 复制 4000 多次