帮助使用JQuery .click事件替换onmousehover和onmouseout属性

Question

我是使用Javascript和JQuery的新手，可以使用一些帮助。

我正在尝试创建一个用于暂停和播放JQuery Cycle幻灯片的控制面板。该面板具有上一个，下一个和播放链接。当用户将鼠标悬停在控件上时，它会将图像替换为另一个图像。当用户点击播放链接时，它会用暂停图像替换图像。我希望能够替换onmousehover和onmouseout属性，以便为暂停链接定义单独的悬停图像。这可能吗？

这是我的代码：

$('.pause').click(function(){
  $("#pausectrl").attr('src',"images/pause1.png");
  $("#pausectrl").attr('onmouseover',"this.src='images/pause2.png'");
  $("#pausectrl").attr('onmouseout',"this.src='images/pause1.png'");
  return false;
});  

HTML：

<a href="" id="play" class="pause"><div id="playctrl"><img id="pausectrl" src="images/play1.png" onmouseover="this.src='images/play2.png'" onmouseout="this.src='images/play1.png'"></div></a>  

Answer 1

试试这个：

$("#pausectrl").mouseenter(function(){
  $(this).attr('src','images/pause2.png');
}).mouseout(function(){
 $(this).attr('src','mages/pause1.png');
});

Answer 2

阅读本教程

http://bavotasan.com/tutorials/a-simple-mouseover-hover-effect-with-jquery/

类似问题

Change the image source on rollover using jQuery

原始代码

HTML

<img src="first.gif" data-hover="second.gif" class="rollover" >

的jQuery

$(function() {
    $('.rollover').hover(function() {
        var currentImg = $(this).attr('src');
        $(this).attr('src', $(this).attr('hover'));
        $(this).attr('hover', currentImg);
    }, function() {
        var currentImg = $(this).attr('src');
        $(this).attr('src', $(this).attr('hover'));
        $(this).attr('hover', currentImg);
    });

Reference