Question

我会尝试尽可能多地解释，我只想在鼠标悬停时更改img标签的src {on Hover}; 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>

使用脚本

动态添加li标签

$('.plus').click(function(e) {
 e.preventDefault();
 var li_count = $('#nav-tabs').length;
 if (li_count <= 3){
  if(counter <= 3){
   $('#nav-tabs').append('<li id="test" ><a href="#tab' + counter + '" data-toggle="tabs" ><img src="assets/img/button_home_plain1.png" width="83" id="test2">Tab' + counter + '</span><button type="button" class="close">&times;</button></a></li>');
} else { alert("Only 3 Tabs Allowed!")};
}

还有一个活动标签可以在标签之间切换，这是使用脚本

完成的

$('li#test').each(function() {
if($(this).hasClass('active'))
 {//Active class is applied
  $(this).children().children().attr("src", "assets/img/button_home_selected3.png");
 }
 else
 {
  $(this).children().children().attr("src", "assets/img/button_home_plain.png");
 }

}）;

我尝试了一些东西，但它不起作用，可能是我在某个地方放错了地方，我不知道

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

Answer 1

您可以尝试使用.data()跟踪原始网址，.on()（jQuery＆gt; = 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"));
});

http://api.jquery.com/on/

Jquery悬停不起作用

1 个答案: