如果<a>被懸停，我如何在div中顯示圖像？

我如果<a>被懸停，我如何在div中顯示圖像？

<script> 
//some jQuery code is here to see img1.jpg if hovered on .img1; 
//img2.jpg if hovered on .img2; 
//img3.jpg if hovered on .img3 
</script> 

    <div id="imgs"> 
    <img src="img1.jpg" alt=""> 
    <img src="img2.jpg" alt=""> 
    <img src="img3.jpg" alt=""> 
    </div> 

    <ul id="my-ul"> 
    <li><a href="#" class="img1">hover to see image1</a></li> 
    <li><a href="#" class="img2">hover to see image2</a></li> 
    <li><a href="#" class="img3">hover to see image3</a></li> 
    </ul>

我想如果徘徊相應的圖像出現在div和看到一個div什麼都沒有，如果不是徘徊。如何使用jQquery？

來源

2012-09-03 Haradzieniec

對不起Adeneo，我會打上兩個答案爲最好。對不起，我必須選擇。我真的不知道哪個答案更好。 – Haradzieniec

沒關係，只是標記最能幫助你的那個，而你決定使用。 – adeneo

謝謝你，adeneo。 – Haradzieniec

我建議：

$('li a').hover(
    function(){ 
     var i = $(this).parent('li').index(); 
     $('#imgs img:eq(' + i + ')').show(); 
    }, 
    function(){ 
     var i = $(this).parent('li').index(); 
     $('#imgs img:eq(' + i + ')').hide(); 
    });

JS Fiddle demo。

來源

2012-09-03 21:50:32

$('#my-ul a').on('mouseenter mouseleave', function(e) { 
    $('#imgs img').eq($(this).parent('li').index()).toggle(e.type==='mouseenter'); 
});

FIDDLE

來源

2012-09-03 21:52:55 adeneo

您可以將屬性添加到您的HREF，像

<a href="#" title="img1.jpg" onmouseover="void(hoverImg(this));">asdf</a>

，並添加一些簡單的腳本，像

function hoverImg(_src) 
{ 
    // Set this to true in order to troubleshoot the script 
    var _debugThis = false; 

    try 
    { 
     var _iSrc = _src.getAttribute('title'); 
     var _iTrg = document.getElementById('imgs'); 
     var _img=document.createElement('img'); 
     _img.src=_iSrc; 
     // other attributes for your image 
     _iTrg.innerHTML=null; 
     _iTrg.appendChild(_img); 
     // inject unhover trigger 
     _iSrc.onmouseout=function(){void(document.getElementById('imgs').innerHTML=null);} 
    } 
    catch (_e) { if (_debugThis) { alert(_e); } } 
}

來源

2012-09-03 22:11:33

如果<a>被懸停，我如何在div中顯示圖像？

回答

相關問題