Question

我有这个代码，一切正常，但.css('color','red')规则没有得到应用。我尝试了不同的方法但却找不到。

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

感谢您的回复。

Answer 1

charAt只返回一个字符串，而不是一个DOM对象，因此你不能使用css。一种选择是在纯CSS中使用CSS3的first-letter选择器：

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

另一个解决方案（虽然更笨重，速度更慢，灵活性更低）是将#menu li标记中的每个span的第一个字符包裹起来并设置样式，但我建议不要这样做。

Answer 2

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

Answer 3

第一个代码不起作用。您正在尝试将css应用于角色。 Css只能应用于html元素，这会影响你的角色。

Answer 4

如果你只有一个单词，那么jfriend00的回答是完美的。但是如果你想将样式应用于字符串中的每个单词，我建议你阅读它 Changing the value of the first letter of each word

jquery .css（）规则未获得应用

4 个答案: