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

希望对你有帮助

Answer 2

使用

 $('#imgdel').attr('src', '/images/reply_icon_disabled.png');

而不是

 $(this).attr('src', '/images/reply_icon_disabled.png');

demo

Answer 3

如果您在页面上有重复的跨度，那么您的 html 是无效的，因为 img 和 font 元素将没有唯一的 id，然后在您的 JS 中，当您尝试使用 $("#imgdel") 选择一个 img 时，它只会找到第一个（在大多数浏览器中），而不是您悬停的那个。

您需要以一种将元素与悬停的特定跨度相关联的方式来选择元素。在您的悬停处理程序中this 将引用有问题的跨度，因此您可以使用.find() method 获取该特定跨度包含的 img：

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

如果这样做，您可以从 img 和 font 元素中删除 id 属性。

“我希望当用户将鼠标悬停和鼠标移出时，图像和字体会发生变化。”

你实际上并没有说你想做什么来改变字体，但你可以使用与上面相同的技术来选择字体元素，即$(this).find("font")。 （你为什么要使用字体元素？那是 so 1990 年代...）

另请注意，如果您为 span 元素分配一个公共类而不是内联 style="..." 属性（如果需要其他内容，您可以保留 id 属性），您的代码会更整洁，这样说：

<span class="superSpan" id='delete<?php echo $tododetail_id; ?>'>

然后将其添加到您的样式表中：

span.superSpan { float:right;cursor:pointer; }

...并将您的 JS 更改为：

$("span.superSpan").hover(...

Answer 4

试试看

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

Answer 5

如果这是硬编码的图像和字体样式。您可以使用 CSS 处理此问题。 否则与jQuery的倍数你需要尝试不同的方法