使用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懸停圖像覆蓋懸停使用

回答

相關問題