Question

我需要为<li>多个鼠标悬停添加/更改我的js 我有一个鼠标悬停来显示图像，但我想在多行上使用它，使用不同的图像，它们都放在同一个div中

我有什么：

＆＃13;

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"
    }
    }

＆＃13;

    <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>

＆＃13;

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();
})

Answer 2

这就是我解决它的方法。因此，您不必一次加载所有图像。

$('.switch__item').mouseenter(function(){
  $('.image').attr('src', $(this).attr('data-img'));
}).mouseleave(function(){
  var image = $('.image');
  image.attr('src', image.attr('data-img'));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<img class="image" src="http://lorempixel.com/400/200/sports/1" data-img="http://lorempixel.com/400/200/sports/1" width="400" height="200">

<ul class="switch">
  <li><a class="switch__item" data-img="http://lorempixel.com/400/200/city/1">Image 1</a></li>
  <li><a class="switch__item" data-img="http://lorempixel.com/400/200/people/1">Image 2</a></li>
  <li><a class="switch__item" data-img="http://lorempixel.com/400/200/transport/1">Image 3</a></li>
</ul>

mouseover for multiple <li> </li>

2 个答案: