使用Javascript悬停图像覆盖悬停使用

-1

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

我见过很多代码都是用CSS做的，但是会增加很多我认为不需要的html代码。该查询最多可以返回4000个40x40图像的结果，我只需要一个覆盖图像就可以将所有这些图像（只有一个悬停在图标上）悬停。

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

的Javascript

find class or id iconoverlay 
onhover overlay this transparent image

HTML

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

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

来源

2017-06-14 knuxyl

请不要这么问写你的代码... – StuntHacks

你怎么样要么贡献或找到更好的办法。 – knuxyl

如果你有一个跨度，一个或类似的块标签包装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

来源

2017-06-14 19:53:26

我似乎无法得到这个工作。我不需要特殊效果，所有这些代码都会在我的图像上放一个黑框。我删除了＃000，但没有任何反应。 – knuxyl

请参阅CodePen.io的实际操作。在这里，在StackOverflow中，我不编码任何图像uri。 –

我非常复制和粘贴该代码，但是我的覆盖图像sitll不显示。覆盖层只是一个具有透明中心的边框。我能想到的唯一可能是我需要图像文件的完整路径（即http：//localhost/img/iconhover.png而不是/img/iconhover.png） – knuxyl

这里的一些代码浮在上空盘旋的元素一个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标签进入“工具提示=”属性，并添加到您的网页

来源

2017-06-14 19:53:24 ControlAltDel

我试图避免复制悬停img src 4000+次 – knuxyl

使用Javascript悬停图像覆盖悬停使用

回答

相关问题