jquery - 图像交换 jquery mouseover

Question

我目前在让 mouseover 和 mouseout 函数在 jquery 中工作时遇到一些问题。我有两个名为“images/doomsday.jpg”的图像和另一个名为“keep_calm.png”的图像，我想在鼠标悬停时交换它们，然后在没有时交换回来。我已经包含了我目前正在尝试使用的代码，任何人都可以看到它的任何问题以及我哪里出错了吗？

$(function() {
$("images/doomsday.jpg")
    .mouseover(function() { 
        var src = $(this).attr("src").match(/[^\.]+/) + "images/keep_calm.png";
        $(this).attr("src", src);
    })
    .mouseout(function() {
        var src = $(this).attr("src").replace("images/keep_calm.png");
        $(this).attr("src", src);
    });

});

Answer 1

你的选择器是错误的。您可以在此处了解选择器。

这是图像交换的演示。

代码 ：

$('document').ready(function() {

  $('img').on({
    'mouseover' : function() {
      $(this).attr('src','http://media02.hongkiat.com/css3-code-slim/css3-markup.jpg');
    },
    mouseout : function() {
  $(this).attr('src','http://www.w3.org/html/logo/downloads/HTML5_Logo_512.png');
    }
  });
});

Answer 2

没有使用选择器。这是您的最终代码的样子

的HTML

<div> <img src="images/doomsday.jpg" id='myimage' /> </div>

Javascript

$('document').ready(function() {
$(function() {
$("#myimage")
    .mouseover(function() { 
        var src = $(this).attr("src").match(/[^\.]+/) + "images/keep_calm.png";
        $(this).attr("src", src);
    })
    .mouseout(function() {
        var src = $(this).attr("src").replace("images/keep_calm.png");
        $(this).attr("src", src);
    });
});
});

Answer 3

也许像这样的演示：http: //jsfiddle.net/m4WuU/只需使用 Jquery toggleClass

HTML

 <div class="holder"><div>

CSS：

 .holder { 
     background-image:url('images/keep_calm.png');         
  }


.swapHolder { 
   background-image:url('images/doomsday.png'); 
 }

JS：

$('.holder').on('hover', function () {  
   $('.holder').toggleClass('swapHolder'); 
});

Answer 4

显然选择器是错误的：您应该使用例如$("#imageid")where image id 是您要更改的图像的 id。