CSS 属性之一不适用于 Jquery：“第一个字母”

Question

这个查询做所有的转换，但不是“第一个字母”，有没有具体的方法：

这是我的脚本：

 function()
        {
            var o = this;

                $('li').on('mouseover', function(event){

                    var el = $(event.target).parent().children()['1'];
                      $(el).css({
                          "background" : "#483D8B",
                          "letter-spacing" : "2px",
                          "text-transform" : "uppercase"
                              });

                });

                $('li').on('mouseout', function(event){
                    var el = $(event.target).parent().children()['1'];
                    $(el).css({

                      "letter-spacing" : "0px",
                      "text-transform" : "lowercase",
                      "first-letter" : "uppercase",
                      "background" : "#4682B4"
                         });

                });

            },

以及相关的Html：

s[i++] = '<li>';
s[i++] =  '<img id=\"'+  ConcernedText[j].name +'\" src="../renderer/bundles/' + ConcernedText[j].icon + '" width="268" height="120" style="display:block"\" />';
s[i++] =  '<a>'+ ConcernedText[j].name + '</a>';
s[i++] = '</p><!----><p>'
s[i++] = '</li>';

在调用此属性时是否有另一种方法，例如：first-letter{ text-transform : uppercase }，如果是这样，Jquery 中的语法应该是什么？

Answer 1

我建议在 css 中添加具有这些属性的类：

.myClass{
    letter-spacing: 0px;
    text-transform: lowercase;
    background: #4682B4;
}
.myClass::first-letter{
    text-transform: uppercase;
}

你的脚本使用：

$(el).addClass('myClass'); 

而不是 .css()。

            $('li').on('mouseover', function(event){

                var el = $(event.target).parent().children()['1'];
                  $(el).css({
                      "background" : "#483D8B",
                      "letter-spacing" : "2px",
                      "text-transform" : "uppercase"
                          });

            });

            $('li').on('mouseout', function(event){
                var el = $(event.target).parent().children()['1'];
                $(el).addClass('myClass);

虽然，您似乎在使用悬停效果，但您也可以使用

el:nth-of-type(2){
    letter-spacing: 0px;
    text-transform: lowercase;
    background: #4682B4;
}
el:nth-of-type(2)::first-letter{
    text-transform: uppercase;
}
el:nth-of-type(2):hover{
    letter-spacing: 2px;
    text-transform: uppercase;
    background: #483D8B;
}

Answer 2

我建议通过添加/删除 CSS 中描述的类来分离 CSS 和 JS。在这种情况下，您的 first-letter 将在 CSS 中工作。此外，如果你可以使用$(this)，我不确定你为什么要创建var el。例如：

$('li').on('mouseout', function(event){
  $(this).addClass('lowercased');
});

在您的 CSS 文件中：

.lowercased {
  "letter-spacing" : "0px",
  "text-transform" : "lowercase",
  "background" : "#4682B4"
}


.lowercased a::first-letter {
  "text-transform" : "uppercase"
}

确保在相反的事件中删除类：

$('li').on('mousein', function(event){
  $(this).removeClass('lowercased');
});