Question

我使用jQuery将.hover类添加到列表项。

$("#list .item").hover(
  function () {
    $(this).addClass("hover");
  },
  function () {
    $(this).removeClass("hover");
  }
);

然后是jQuery中的样式（我必须在JS中提供样式）

$('#list .item.hover').css('padding-left', '20px');

正在应用悬停类但是没有拾取样式？

Answer 1

使用CSS：）

.item:hover { 
  padding-left: 20px;
}

不需要jQuery / JavaScript：）

当你使用选择器时，它会找到与那个选择器当时匹配的元素并在其上运行链的其余部分，它不会在后台创建新的CSS样式规则或任何东西，你需要在CSS中定义这些样式。

如果由于其他原因需要使用悬停类，可以执行以下操作：

$("#list .item").hover(function () {
   $(this).toggleClass("hover");
});

但在这种情况下你应该坚持使用CSS和:hover：）

Answer 2

尝试：

$('#list .item:hover').css('padding-left', '20px');

：hover是一个伪类。

Answer 3

您正在将样式表与应用于元素的样式混合在一起。第二个代码块中的jQuery代码不会创建在将类添加到元素时应用的样式表规则，它会将样式应用于在执行代码时具有类的元素。

如果您希望在将类添加到元素时启动样式，则必须将其作为样式表中的规则。或者，您只需更改悬停事件处理程序中的样式：

$("#list .item").hover(
  function () {
    $(this).css('padding-left', '20px');
  },
  function () {
    $(this).css('padding-left', '');
  }
);

Answer 4

你有没有理由通过javascript添加样式？我敢打赌，如果你通过css完成这项工作，那就完美了。

我猜测正在发生的是你正在添加/删除班级悬停，这有效，但是当：

$('#list .item.hover').css('padding-left', '20px');

发生，这些类中没有一个实际上有一类悬停（当时）。对于在事后添加.hover的所有项目，该声明不会持续存在。

再次，将样式放在css

中

Answer 5

您的.hover类可能在样式中声明不正确：

#list .item .hover
{
   /*
     won't be applied when <element class='item hover'/>,
     only when <element class='item'><sub-element class='hover'/></element>
   */
}

#list .item.hover
{
   /*
     will be applied when <element class='item hover'/>,
     but not when <element class='item'><sub-element class='hover'/></element>
   */
}

jQuery CSS和.hover（）没有提升风格

5 个答案: