如何在jquery上更改鼠标悬停的链接图像答案

【问题标题】：How to change a link image on mouse over on jquery如何在jquery上更改鼠标悬停的链接图像
【发布时间】：2010-07-07 09:52:17
【问题描述】：

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

<!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>

提前致谢。

【问题讨论】：

标签： jquery

【解决方案1】：

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

试试这样的：

JavaScript（根据 cmets 更新）

$(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');
    }
  );
});

【讨论】：

是的，你是对的。我忽略了第 1 项。我使用了您的代码，但在悬停时仍然无法更改。
对不起，我错过了# 的MyImage。现在已经修好了。
感谢您的代码。如果我使用图像按钮但仍然无法使用超链接，它可以工作。超链接在服务器端运行 HyperLink 并且不允许我使用 id=" MyImage”，因为它已经使用了 id="Hyperlink1" 还有其他建议吗？感谢您的帮助。
我已经更新了代码，因此它不需要图像 ID - 它现在直接引用链接内的 <img> 标记。
您的代码有效。但是，我没有提到我希望将链接放在数据列表中。当我使用您的代码时，它会替换表格上的第一个链接，但是当我将鼠标悬停在它们上面时，其他剩余的链接不会改变。很抱歉没有提到我想要一个包含链接的列表，而不仅仅是一个链接。

【解决方案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');
    });
  });

});

【讨论】：

你甚至不需要将它包装在each() 中：无论如何，大多数 jQuery 函数都适用于所有匹配的元素。
我使用了代码，它不会更改单个图像。以下是更改： $(document).ready(function() { $.each($('#ctl00_ContentPlaceHolder1_dlOpenRequests > a'), function(i, item) { $(item).hover( function () { $( 'img', this).attr('src', '../images/edit_on.gif'); }, function () { $('img', this).attr('src', '../ images/edit_off.gif'); }); }); 感谢您的帮助。