Onmouseover使用jQuery更改图片和字体颜色

Question

我在编码中迷失了方向。 我真的是jquery新手。 我有一个跨度，在我的跨度中包含img和字体。 我想要当用户将鼠标悬停和鼠标移出时图像和字体更改。

这是我的HTML，我必须输入<?php echo $tododetail_id; ?> <?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

我看到一个问题（除了使用font标签之外，这实际上应该使用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

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

相反，您需要以一种将元素与所悬停的特定范围相关联的方式来选择元素。 在您的悬停处理程序中， this将引用有问题的跨度，因此您可以使用.find()方法获取特定跨度包含的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") 。 （你为什么要使用在所有的字体元素？这是如此 ... 20世纪90年代）

还请注意，如果您为span元素分配了一个通用类而不是inline style="..."属性（如果需要其他东西，则可以保留id属性），则代码会更整洁，例如：

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

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

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

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

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

Answer 3

采用

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

代替

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

演示

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需要成倍增加，您需要尝试其他方法