Question

我正在尝试编写一个脚本，这样当有人在图像上盘旋时，相同的图像会变为另一个图像，即。我将鼠标悬停在up.png上，并且它变为up_highlighted.png，当鼠标离开图像时它会改变回来。

然而，尽管我尝试了所有尝试，但似乎无法使其工作，这是我迄今为止所尝试的相关代码：

print "<img src=\"/images/up.png\" class=\"thumbsbtn1\" style=\"position:absolute;top:60px;left:1px;width:28px;\" onhover=\"hover_up()\" onclick=\"increase_rating()\">";

function hover_up(){
$(document).ready(function() {
    var oldSrc = $('.thumbsbtn1').attr('src');

    $('.thumbsbtn1').hover(function() {
        //on hover of your element

        $('.thumbsbtn1').attr('src','/images/up_hover.png');
    }, function() {
        //when the cursor leaves your element

        $('.thumbsbtn1').attr('src', oldSrc);
    });
});
}

PS。我不想使用精灵。

Answer 1

您不必将$(document).ready包含在hover_up函数中。请注意，我已从HTML

中删除了onhover

尝试

print "<img src=\"/images/up.png\" class=\"thumbsbtn1\" style=\"position:absolute;top:60px;left:1px;width:28px;\" onclick=\"increase_rating()\">";


$(document).ready(function() {
    var oldSrc;
    $(document).on('hover', '.thumbsbtn1', function () {
        oldSrc = $('.thumbsbtn1').attr('src');
        $('.thumbsbtn1').attr('src','/images/up_hover.png');
    }, function () {
        $('.thumbsbtn1').attr('src', oldSrc);
    });
});

Answer 2

旧学校：http://jsfiddle.net/PAGUp/

var elem = document.getElementById('targetImg');
var oldSrc;
elem.onmouseover = function() {
    oldSrc = elem.src;
    elem.src = 'http://www.eclipse-developers.com/images/up_hover.png';
}

elem.onmouseout = function() {
    if(typeof oldSrc !== 'undefined') {
        elem.src = oldSrc;
    }
}

我确定jquery更精悍。基本上你需要一个变量来保持旧的＆＃39; src URL，mouseover和mouseout处理程序，用于设置新URL并将其退出。

Answer 3

试试这个

print "<img src=\"/images/up.png\" class=\"thumbsbtn1\" style=\"position:absolute;top:60px;left:1px;width:28px;\" onhover=\"hover_up(this)\" onclick=\"increase_rating()\" onmouseout=\"hover_out(this)\">";


var oldSrc;
function hover_up(e){
oldSrc = $('.thumbsbtn1').attr('src');
$('.thumbsbtn1').attr('src','/images/up_hover.png');
}  
function hover_out(e){
$('.thumbsbtn1').attr('src',oldSrc);
}

在悬停时JavaScript更改图像

3 个答案: