jQuery CSS和.hover（）無法選擇樣式

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>
   */
}