Javascript Jquery悬停不起作用

我将尽可能多地解释，我只想在鼠标位于img标记{onhover}上时更改它的src；html是

<ul id="nav-tabs" data-tabs="tabs">
  <li id="test" style="list-style: none;" class="active">
   <a href="#home" data-toggle="tabs" ><img src="assets/img/button_home_selected3.png" id="test2"  width="83"/><span  s>Home</span></a>
  </li>
</ul>

}))

我试过一些东西，但它不起作用，可能是我把它放错地方了，我只是不知道

$('#test2').hover(function(e) {
  e.preventDefault();
  if ($(this).attr('src') == 'assets/img/button_home_plain1.png')
  {
   $(this).attr('src','assets/img/button_home_mouseOver1.png');
  }
}); 

---

您可以尝试使用

.data（）

跟踪原始URL，并使用

.on（）

（jQuery>=1.7）注册事件回调：

$("#nav-tabs").on("mouseover", "#test2", function(){
    $(this).data("originalSrc", $(this).attr("src"));
    $(this).attr("src", "assets/img/button_home_mouseOver1.png");
});

$("#nav-tabs").on("mouseout", "#test2", function(){
    $(this).attr("src", $(this).data("originalSrc"));
});

---

您可能已经花了很长时间来做这件事，但是使用CSS做这类事情比较容易，因为这或多或少是CSS所做的。e、 你可以在javascript中设置类，但在CSS中进行所有的图像交换。你正在添加多个具有相同id和图像的Li项。您可能想改用类。您是否已将所有内容都放在$（document）.ready（function（）{}）中？同时也不要尝试添加jquery.min脚本如何将图像src与css交换，这是否可能，是的，我已经添加了文档。就绪功能您根本不必使用图像。在

li

上使用

背景图像

，并在左侧添加一点

填充

，这样文本就不会从其顶部溢出。然后你可以在CSS中为

li:hover

或

#test2:hover

使用一个不同的图像。thanx很多时候，我都在使用mouseOver，但是如果你阅读上面的代码，你可以看到有一个活动类在li标记之间切换，现在我只想在mouseout上的原始src，因为它将有选择的图像或普通图像，因此总共有3个图像。你知道有什么方法可以找到img标签的原始src，这样我就可以把它放在鼠标中，而不是编辑我的答案来跟踪URL。如果出于某种原因，

mouseout

事件将在

mouseover

之前被调用，则此示例将失败，但如果在您的案例中是一个问题，则修复该问题也相当容易。

$('#test2').hover(function(e) {
  e.preventDefault();
  if ($(this).attr('src') == 'assets/img/button_home_plain1.png')
  {
   $(this).attr('src','assets/img/button_home_mouseOver1.png');
  }
}); 

$("#nav-tabs").on("mouseover", "#test2", function(){
    $(this).data("originalSrc", $(this).attr("src"));
    $(this).attr("src", "assets/img/button_home_mouseOver1.png");
});

$("#nav-tabs").on("mouseout", "#test2", function(){
    $(this).attr("src", $(this).data("originalSrc"));
});