javascript - 多个 的鼠标悬停

Question

对于来自 <li> 的多次鼠标悬停，我必须向我的 js 添加/更改什么？我有一个鼠标悬停来显示图像，但我想在多行上使用它，不同的图像，它们都放在同一个 div 中

我有什么:

function ShowPicture(id,Source) {
    if (Source=="1"){
    if (document.layers) document.layers[''+id+''].visibility = "show"
    else if (document.all) document.all[''+id+''].style.visibility = "visible"
    else if (document.getElementById) document.getElementById(''+id+'').style.visibility = "visible"
    }
    else
    if (Source=="0"){
    if (document.layers) document.layers[''+id+''].visibility = "hide"
    else if (document.all) document.all[''+id+''].style.visibility = "hidden"
    else if (document.getElementById) document.getElementById(''+id+'').style.visibility = "hidden"
    }
    }

    <li>
    <div class="block_pic">
    <a href="img/page2_big1.jpg"><img src="img/page2_pic1.jpg" alt=""></a>
    <div id="Style"><img src="img/duck.png"> 
    </div>
    </div>
    <div class="txt_info">
    <ul>
    
    <li class="color_2">Trompetten</li>
    <li><a href="#" class="link_1 animate" onMouseOver="ShowPicture('Style',1)" onMouseOut="ShowPicture('Style',0)">NameA</a></li>
    
    <li><a href="#" class="link_1 animate">NameB</a></li>
    <li><a href="#" class="link_1 animate">NameC</a></li>
    </ul>

    

Answer 1

也许是这样的:

http://jsfiddle.net/zfoo75bw/

HTML:

<div class="block_pic">    
    <div id="Style1"><img src="http://placehold.it/100&text=1"></div>
    <div id="Style2"><img src="http://placehold.it/100&text=2"></div>
    <div id="Style3"><img src="http://placehold.it/100&text=3"></div>
</div>

<ul>
    <li class="color_2">Trompetten</li>
    <li><a href="#" class="link_1 animate" data-img-id="Style1">NameA</a></li>    
    <li><a href="#" class="link_1 animate" data-img-id="Style2">NameB</a></li>
    <li><a href="#" class="link_1 animate" data-img-id="Style3">NameC</a></li>
</ul>

JQ:

$('.link_1').hover(function(){
    var $imgID=$(this).attr('data-img-id');
    $('#'+$imgID).show();
},function(){
    var $imgID=$(this).attr('data-img-id');
    $('#'+$imgID).hide();
})