Question

我在HTML中有一个带有源图像的img标记;然后我会在鼠标悬停时将图像切换到另一个图像;正是我在rel属性中设置的图像。

然后在mouseout上切换回源图像。

我写了这个脚本，但它不起作用;问题肯定是由于错误使用＆＃34;元素＆＃34;但我无法解决。

＆＃13;

function hover(element) {
  $(element).fadeOut(1000, function(element) {
    element.setAttribute("src", element.attr("rel"));
  }).fadeIn(1000);
  return false;
}

function unhover(element) {}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img id="image" 
     src="http://www.google.com/logos/2011/trevithick11-hp.jpg" 
     rel="http://www.google.com/logos/2011/mothersday11-hp.jpg" 
     onmouseover="hover(this);" 
     onmouseout="unhover(this);" 
     />

＆＃13;

解决后，我将专注于mouseout事件

Answer 1

你将简单的vanilla JS与jQuery混合在一起。您要做的第一件事是删除内联事件处理程序。然后，使用：

$('#image').hover(function(){
    $(this).fadeOut(1000, function() {
        $(this).attr( "src", $(this).attr("rel") );
    }).fadeIn(1000);
},function(){})

$('#image').hover(function() {
  $(this).fadeOut(1000, function() {
    $(this).attr("src", $(this).attr("rel"));
  }).fadeIn(1000);
}, function() {})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img id="image" src="http://www.google.com/logos/2011/trevithick11-hp.jpg" rel="http://www.google.com/logos/2011/mothersday11-hp.jpg" />

如果你想要处理鼠标输出，试试这个：

$('#image').hover(function() {
  $(this).stop().fadeOut(1000, function() {
    $(this).attr({
      "src": $(this).attr("rel"),
      "rel": $(this).attr("src")
    });
  }).fadeIn(1000);
}, function() {
  $(this).stop().fadeOut(1000, function() {
    $(this).attr({
      "src": $(this).attr("rel"),
      "rel": $(this).attr("src")
    });
  }).fadeIn(1000);
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img id="image" src="http://www.google.com/logos/2011/trevithick11-hp.jpg" rel="http://www.google.com/logos/2011/mothersday11-hp.jpg" />

Answer 2

$('#img1').mouseover(function(){
  $('#img1').attr("src","new_source");

});
$('#img1').mouseout(function(){
  $('#img1').attr("src","old_source");

});

你可以看到它here

Answer 3

试试这个：它会帮助你......

function hover(element) {
    $("#image").fadeOut(200, function() {
        element.src= "http://www.google.com/logos/2011/mothersday11-hp.jpg";
    }).fadeIn(200);
  return false;
}

function unhover(element) {
            element.src= "http://www.google.com/logos/2011/trevithick11-hp.jpg";
}

Answer 4

var original_src = null;

$('#image').hover(
  // when mouse is over
  function(){
    original_src = $(this).attr('src');
    $(this).attr("src", $(this).attr("rel"));
  },
  // when mouse is out
  function(){
    $(this).attr("src", original_src);
  }
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img id="image" 
     src="http://www.google.com/logos/2011/trevithick11-hp.jpg" 
     rel="http://www.google.com/logos/2011/mothersday11-hp.jpg" 
     />

以下是动画示例：

$(function(){
  var image = $('#image'),
      src = image.attr('src'),
      rel = image.attr('rel'),
      cloned_image = image.clone(),
      speed = 300;
    
  cloned_image.
  attr('src', rel).
  attr('id', image.attr('id')+'-clone').
  css({
    position: 'fixed',
    left: image.position().left,
    top: image.position().top,
    display: 'none'
  }).
  insertAfter(image);
  
  image.mouseover(
    function(){
      cloned_image.stop().fadeIn(speed);
      $(this).stop().fadeOut(speed);
    },
  );
  
  $('#'+image.attr('id')+'-clone').mouseout(function(){
    image.stop().fadeIn(speed);
    $(this).stop().fadeOut(speed);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img id="image" 
     src="http://www.google.com/logos/2011/trevithick11-hp.jpg" 
     rel="http://www.google.com/logos/2011/mothersday11-hp.jpg" 
     />

如何在jquery中切换img标签的src

4 个答案: