Question

我需要在鼠标悬停时更改链接图像。我使用以下代码但不起作用。也许问题在于图像源，但我仍然无法找到他的代码有什么问题。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"   
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head><title>Edit Document</title> 

<script src="../Scripts/jquery-1.3.2.js" type="text/javascript"></script> 
<script type="text/javascript"> 

        $(document).ready(function () {
        $("#lnkEdit").hover(
        function () {
            this.src = this.src.replace("../images/edit_off.gif", "../images/edit_on.png");
        },
        function () {
            this.src = this.src.replace("../images/edit_on.png", "../images/edit_off.gif");
        }
        );
    });

</script> 
</head> 
<body> 
<form method="post" action="Hover4.aspx" id="form1"> 
<div class="aspNetHidden"> 
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUJNTkwNjIyODQxZGR6kotcsbIsWRfokZrzasCtfPi0dxz4MBWWh9VxSJ6R0Q==" /> 
</div> 

<div> 
    <a id="HyperLink1" href="Hover4.aspx"><img src="../images/edit_off.gif" alt="HyperLink" /></a> 
</div> 
</form>

提前致谢。

Answer 1

您在代码中引用了#lnkEdit，但页面上没有包含该ID的元素
您不需要replace或任何特殊功能，只需指定新的图像源即可。

尝试这样的事情：

JavaScript （根据评论更新）

$(document).ready(function () {
  $('#your_table_id > a').hover(
    function () {
        $('img', this).attr('src', '../images/edit_on.png');
    },
    function () {
        $('img', this).attr('src', '../images/edit_off.png');
    }
  );
});

Answer 2

学分必须去@casablanca，这应该有效：

$(document).ready(function () {
  $.each($('#your_table_id > a'), functio(i, item) {
    $(item).hover(
    function () {
        $('img', this).attr('src', '../images/edit_on.png');
    },
    function () {
        $('img', this).attr('src', '../images/edit_off.png');
    });
  });

});

如何在jquery上更改鼠标上的链接图像

2 个答案: