jquery .css（）規則沒有得到應用

我有這個代碼，一切工作正常，但.css('color','red')規則沒有得到應用。我嘗試了不同的方式，但無法找到任何。jquery .css（）規則沒有得到應用

$('#menu li').each(function() { 
$(this).hover(function() { 
$(this).text().charAt(0).css('color','red'); 
}); 
});

但是這段代碼工作的很好。不知道上圖代碼有什麼問題。

$('#menu li').each(function() { 
$(this).hover(function() { 
$(this).css('color','red'); 
}); 
});

感謝您的回覆。

來源

2011-08-10 Abap newbie

$(this).text().charAt(0)是一個JavaScript字符串。它沒有方法.css()。

因此，您無法將CSS應用於JavaScript字符串中的單個字符。

如果要將顏色應用於頁面中的一個字符，必須獲取文本，在第一個字符周圍添加span標籤，添加樣式，然後將該HTML設置回DOM元素。

我建議改變你的代碼如下：

$('#menu li').hover(function() { 
    var text = $(this).text(); 
    text = "<span style='color: red'>" + text.charAt(0) + "</span>" + text.slice(1); 
    $(this).html(text); 
    }, 
    function() { 
    $(this).html($(this).text()); 
});

你可以看到一個在這裏的行動：http://jsfiddle.net/jfriend00/9xCak/

我不建議使用此jQuery的，因爲有更好的方法來做到這個。它可以用純CSS完成，或者你可以用你的jQuery添加/刪除一個類。

請注意，您不需要each循環，因爲您可以在第一個jQuery選擇器上設置一個懸停處理程序，並且它將爲選擇器中的所有匹配元素執行.hover。另外，當鼠標離開時，您在懸停呼叫中有第二個功能來設置它。

如果您打算在鼠標離開li時紅色消失，那麼您可以完全使用CSS完成此操作。不需要jQuery。

HTML：

<li><span class="firstLetter">F</span>irst Menu Item</li>

CSS：

li .firstLetter:hover {color:red;}

來源

2011-08-10 04:59:20 jfriend00

Thanks.That was a awesome reply。 –

charAt只返回一個字符串，而不是一個DOM對象，因此不能使用css它。一種選擇是純CSS使用CSS3的first-letter選擇：

#menu li:hover:first-letter { 
    color: red; 
}

另一種解決方案（雖然比較笨重，速度較慢，而且不靈活）被包裹每#menu li的第一個字符在span標籤和風格，但我建議反對它。

來源

2011-08-10 04:59:44

對於css3實現+1。 – ace

第一個代碼不會工作。您正試圖將CSS應用於角色。 Css只能應用於html元素，這會影響你內部的角色。

來源

2011-08-10 05:02:47

如果你只有一個單詞，那麼jfriend00的答案是完美的。但是，如果你想對字符串中的每個單詞應用樣式，我建議你閱讀這個 Changing the value of the first letter of each word

來源

2011-08-10 05:16:25 Webars

jquery .css（）規則沒有得到應用

回答

相關問題