Onmouseover使用jquery更改圖片和字體顏色

我在我的代碼中丟失了某處。我真的很新的jQuery。我有一個跨度，在我的範圍內包含img和字體。我想當用戶鼠標懸停和鼠標移動圖像和字體的變化。Onmouseover使用jquery更改圖片和字體顏色

這裏我的HTML，我已經把<?php echo $tododetail_id; ?>我跨度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');  
    }); 
});

請幫助我。

來源

2013-10-04 user2699175

[不使用的字體標記了（HTTPS：//developer.mozilla .org/zh-CN/docs/Web/HTML/Element/font） – George

[jsless alternative]（http://jsfiddle.net/vRe8q/） – GuiDocs

來源

2013-10-04 09:45:17 kraf

嘗試像

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

來源

2013-10-04 09:33:49 Gautam3164

如果您有反覆這樣的跨度在頁面上的HTML是無效的，該張圖片和字體的元素不會有唯一的ID，然後在你的JS，當您嘗試選擇img與$("#imgdel")它只會找到第一個（在大多數瀏覽器中），而不是您懸停的那個。

您需要改變元素的方式，使它們與被徘徊的特定跨度相關聯。在您的懸停處理程序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');  
    }); 
});

如果你這樣做，你可以刪除ID從IMG屬性和字體元素。

「我想當用戶mouseover和鼠標移動圖像和字體改變。」

其實你不說你要做些什麼來改變字體的東西，但你可以使用同樣的技術如上選擇字體元素，即$(this).find("font")。（你爲什麼要使用在所有字體的元素嗎？這是所以 1990 ...）

還請注意，您的代碼將是整潔，如果您分配了常見的類的span元素，而不是內聯style="..."屬性（可以保持id屬性，如果需要其他的東西），說是這樣的：

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

然後添加到您的樣式表：

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

...並改變你的JS到：

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

來源

2013-10-04 09:37:29 nnnnnn

hahaha ..不管怎樣，我都會感謝..我知道這是一種非常古老的風格。。因爲我真的是新的編碼..所以只是嘗試我知道的任何.. :) – user2699175

如果這是一個硬編碼的圖像和字體樣式。你可以用CSS來處理。其他與jQuery的倍數，你需要嘗試不同的方法

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

demo

來源

2013-10-04 09:41:48 Nes

_「你可以處理這與CSS」_ - 如何？ _「其他與jQuery的倍數，你需要嘗試不同的方法」_ - 而且這種方法將是...什麼？（就目前而言，這個答案更多的是評論，不是嗎？） – nnnnnn

使用

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

，而不是我看到的一個問題（除了使用的字體標記，這應該真的用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');  
    }); 
});

希望它可以幫助

來源

2013-10-04 09:42:03 Ashish

Onmouseover使用jquery更改圖片和字體顏色

回答

相關問題