javascript - Onmouseover使用jquery更改图片和字体颜色

Question

我在编码中不知所措。我对 jquery 真的很陌生。我有一个跨度，其中包含 img 和字体。我希望当用户将鼠标悬停和鼠标移出时图像和字体会发生变化。

这里是我的 HTML，我必须输入 <?php echo $tododetail_id; ?>在我的 span id 中，因为这是循环过程

<span style='float:right;cursor:pointer;' id='delete<?php echo $tododetail_id; ?>'>
    <img id='imgdel' src='images/delete_icon_disabled.png'/>&nbsp;
    <font id='fontdel' style='text-decoration:underline;' color='#BDBDBD'>
    <?php echo lang['DETAIL_REMOVE_CMT_B']; ?></font>
</span>

这是我的jquery

$(document).ready(function(e) {
    $("span[id^='delete']").hover(function() {
        $("#imgdel").attr('src', '/images/reply_icon.png');
    }, function() {
        $(this).attr('src', '/images/reply_icon_disabled.png');      
    });
});

请帮助我。

Answer 1

我看到一个问题(除了使用字体标签之外，这实际上应该使用 css 来完成)，id 应该是唯一的。如果循环此代码，您将拥有多个 ID 为“imgdel”的 img 标签。 Afaik jQuery 不会返回选择器 $('#imgdel') 的列表，而只会返回第一个匹配的列表。所以我会尝试将 php 部分更改为

<img class='imgdel' src='images/delete_icon_disabled.png'/>&nbsp;

然后做

$(document).ready(function(e) {
    $("span[id^='delete']").hover(function() {
        $(this).find('img.imgdel').attr('src', '/images/reply_icon.png');
    }, function() {
        $(this).find('img.imgdel').attr('src', '/images/reply_icon_disabled.png');      
    });
});

希望对你有帮助