HTML + JavaScript：如何在悬停时更改图像源？

问题描述

我的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来做到这一点？

您可能会想到以这种方式向li添加data-属性：

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

并带有一个图像：

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

希望您可以以此为起点来做自己的事情。

为什么不使用CSS？

a {
    background-image:url('myimage.jpg');
  }

a:hover {
    background-image:url('myotherimage.jpg');
}

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