使用Javascript悬停时的图像对图像覆盖

我有一个php sql查询，将生成大量图像，我需要一个代码，将覆盖一个半透明的图像上的原始图像悬停

我已经看到了很多用CSS实现这一点的代码，但这将添加大量我认为不需要的html代码。查询可以返回多达4000个包含40x40个图像的结果，我只需要一个覆盖图像就可以覆盖悬停时的所有结果（只有一个悬停）

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

Javascript

find class or id iconoverlay
onhover overlay this transparent image

HTML

---

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

下面是一些代码，可以在元素上浮动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]);

函数创建工具提示（elem）{
如果（！elem.getAttribute）返回；
if（elem.getAttribute（'tooltip'））{
$（元素）。悬停(
功能（事件）{
$（'#tt'）.html（this.getAttribute（'tooltip'）；
$（'#tt'）.css（'left'，（event.pageX+10）+'px'）；
$（'#tt'）.css（'top'，event.pageY+'px'）；
$（'#tt'）.show（）；
},
功能（事件）{
$（'#tt'）.hide（）；
});
}
for（var i=0；i

---

如果将img标记放入“tooltip=”属性，并将其添加到页面中，则需要执行的操作是：如果您有一个span、一个或类似的块标记包装img。您可以这样做：

.imgHover{显示：内联块；位置：相对；}
.imgHover:在{content:''之后；宽度：100%；高度：100%；背景：#000 url（'MyPlaceholderURI.jpg'）无重复中心；显示：块；位置：绝对；顶部：0；左侧：0；不透明度：0；过渡：不透明度.5s线性；}
.imgHover:悬停：在{opacity:1}之后

您可以在此处看到这一点：

---

我似乎无法让它工作。我不需要特殊效果，这些代码所做的只是在我的图像上放置一个黑匣子。我删除了#000，但什么也没发生。请查看CodePen.io上的实际操作。在StackOverflow中，我没有编写任何图像uri。我几乎复制并粘贴了这些代码，但是我的覆盖图像sitll没有显示出来。覆盖只是具有透明中心的边界。我能想到的唯一一件事是，可能我需要图像文件的完整路径（即，而不是/img/iconhover.png），这不是覆盖图像的路径问题。这很奇怪，我和你的代码没有任何区别。可能是因为它位于JQuery UI选项卡中的JQuery数据表中吗？实际代码位于标记之间这是img src，这是css.imgHover{display:inline block；position:relative；}.imgHover:after{content:''；宽度：100%；高度：100%；背景：#000 url（'）无重复中心；显示：块；位置：绝对；顶部：0；左侧：0；不透明度：0；过渡：不透明度。5s线性；}.imgHover:hover:after{opacity:1}请不要要求这样来编写代码…你要么贡献自己的力量，要么找点更好的事情做。我试图避免复制hover-img src 4000多次

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]);

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