Question

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

我已经看到很多代码用CSS来做这件事，但这会增加大量我认为不需要的HTML代码。该查询最多可以返回40个40x40图像的4000个结果，我只需要一个叠加图像覆盖所有这些（只有一个悬停）悬停。

从技术上讲，这就是我需要的东西

的Javascript

find class or id iconoverlay
onhover overlay this transparent image

HTML

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

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

Answer 1

如果你有一个包含img的span，a或类似的块标记。你可以这样做：

<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

Answer 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标签放入＆＃34; tooltip =＆＃34;那么你需要做的就是属性并添加到您的页面

使用Javascript悬停在图像上的图像

2 个答案: