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