对于来自 <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>
最佳答案
也许是这样的:
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();
})
关于javascript - 多个 <li> 的鼠标悬停,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27003911/