Question

我有一个ul里面有5个li，而ul的范围是6：

<div class="coffee-span-6 recent-news-list">
 <ul class="unorder-list news-item-list">
  <li class="news-item"><a href="#">Lorem Ipsum</a></li>
  <li class="news-item"><a href="#">Lorem Ipsum</a></li>
  <li class="news-item"><a href="#">Lorem Ipsum</a></li>
  <li class="news-item"><a href="#">Lorem Ipsum</a></li>
  <li class="news-item"><a href="#">Lorem Ipsum</a></li>
 </ul>
</div>

然后是另一个带有一个图像的跨度6：

<div class="coffee-span-6 recent-news-col">
    <img id="image" src="http://lorempixel.com/460/200/abstract/1"
</div>

我希望它就像是，当我将鼠标悬停在第一个li上时，它会更改图像源，然后在悬停时，它会恢复为原始图像。我试过这个：

<li class="news-item" onmouseover="changeImage();" onmouseout="revertImage();"> <-- this is first li

对于剧本：

<script>
  function changeImage(){
            document.getElementById("image").src="http://lorempixel.com/460/200/abstract/2";
} 
function revertImage(){
        document.getElementById("image").src="http://lorempixel.com/460/200/abstract/1";
}

我的意思是，它有效，但如果我在其他li上实现onmouseover和onmouseout：

<li class="news-item" onmouseover="changeImage();" onmouseout="revertImage();">
<li class="news-item" onmouseover="changeImage();" onmouseout="revertImage();">
<li class="news-item" onmouseover="changeImage();" onmouseout="revertImage();">
<li class="news-item" onmouseover="changeImage();" onmouseout="revertImage();">
<li class="news-item" onmouseover="changeImage();" onmouseout="revertImage();">

我希望在li上更改 取决于 的图像，我该怎么做？我不认为让每个li都有一个不同的方法是非常有效的...有没有办法用更多的JavaScript或JQuery来做到这一点？

Answer 1

将图片的url通过参数传递给您的函数：

<li class="news-item" onmouseover="changeImage('http://foo.com/img1.jpg');" onmouseout="revertImage('http://foo.com/imgBase.jpg');">
<li class="news-item" onmouseover="changeImage('http://foo.com/img2.jpg');" onmouseout="revertImage('http://foo.com/imgBase.jpg');">
<li class="news-item" onmouseover="changeImage('http://foo.com/img3.jpg');" onmouseout="revertImage('http://foo.com/imgBase.jpg');">
<li class="news-item" onmouseover="changeImage('http://foo.com/img4.jpg');" onmouseout="revertImage('http://foo.com/imgBase.jpg');">
<li class="news-item" onmouseover="changeImage('http://foo.com/img5.jpg');" onmouseout="revertImage('http://foo.com/imgBase.jpg');">

然后：

  function changeImage(imgSrc){
      document.getElementById("image").src=imgSrc;
  } 
  function revertImage(imgSrc){ 
      document.getElementById("image").src=imgSrc;
  }

Answer 2

您可以考虑以这种方式向data-添加li属性：

<div class="coffee-span-6 recent-news-list">
  <ul class="unorder-list news-item-list">
    <li class="news-item" data-item="1"><a href="#">Lorem Ipsum</a></li>
    <li class="news-item" data-item="2"><a href="#">Lorem Ipsum</a></li>
    <li class="news-item" data-item="3"><a href="#">Lorem Ipsum</a></li>
    <li class="news-item" data-item="4"><a href="#">Lorem Ipsum</a></li>
    <li class="news-item" data-item="5"><a href="#">Lorem Ipsum</a></li>
  </ul>
</div>

您可以使用以下方法控制图像源：

$(function () {
    // Grab all the news items.
    $(".news-item").hover(function () {
        // Replace with new image.
        $("#img-" + $(this).data("item")).data("src", $("#img-" + $(this).data("item")).attr("src"));
        $("#img-" + $(this).data("item")).attr("src", "new-" + $(this).data("item") + ".png");
    }, function () {
        // Reset the old image.
        $("#img-" + $(this).data("item")).attr("src", $("#img-" + $(this).data("item")).data("src"));
    });
});

以上代码适用于所有图像：

<img src="" alt="" id="img-1" />
<img src="" alt="" id="img-2" />
<img src="" alt="" id="img-3" />
<img src="" alt="" id="img-4" />
<img src="" alt="" id="img-5" />

使用One Image：

$(function () {
    // Grab all the news items.
    $(".news-item").hover(function () {
        // Replace with new image.
        $("#image").data("src", $("#image").attr("src"));
        $("#image").attr("src", "new-" + $(this).data("item") + ".png");
    }, function () {
        // Reset the old image.
        $("#image").attr("src", $("#image").data("src"));
    });
});

希望你能以此为出发点来做你的事。

Answer 3

为什么不用css？

commits

如果您需要将其保留在html文件中，请使用内联样式（不是最佳路径）。

HTML + JavaScript：如何在li hover上更改图像源？

3 个答案: