使用 jQuery addclass 添加 CSS 子类

Question

我正在尝试使用 jQuery 将子 class 添加到 class，我的 CSS 如下所示：

.block:nth-child(7) .permahover {
   top: 0 !important; 
   left: 0 !important;
   opacity: 0;
   filter: alpha(opacity=0);
  -webkit-transform: translate(0, 0) !important;
      -ms-transform: translate(0, 0) !important;
          transform: translate(0, 0) !important
}

虽然这是供参考的js代码：

$(".block:nth-child(7)").mouseenter(function () {
    $(".block:nth-child(7)").addClass("permahover");
});

如果我删除 class 名称中的“.block:nth-child(7)”，那么它看起来就像“.permahover”，一切正常，但我需要它是一个子class。我尝试将 javascript ".addClass("permahover")" 替换为 ".addClass("block:nth-child(7) .permahover") 但正如预期的那样，它没有用。有什么办法可以解决这个问题吗？如果没有，有什么解决方法（即使它要求我不要使用 jQuery）？

Answer 1

您不能将伪 class 添加到 DOM 元素。如果你仔细想想，你就会明白不可能将 :nth-child(7) class 添加到不是其父元素的第七个子元素的元素。

但是对于你的问题你甚至不需要它，你应该只删除 .permahover

之前的 space

.block:nth-child(7).permahover {
   top: 0 !important; 
   left: 0 !important;
   opacity: 0;
   filter: alpha(opacity=0);
  -webkit-transform: translate(0, 0) !important;
      -ms-transform: translate(0, 0) !important;
          transform: translate(0, 0) !important
}

如果您将 space 留在那里，您的 CSS 规则将匹配第 7 个 .block 中带有 permahover class 的子元素。

<div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block permahover"></div> <!-- .block:nth-child(7).permahover  { ... } -->
</div>

<div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block">
        <div class="permahover"></div> <!-- .block:nth-child(7) .permahover { ... } -->
    </div>
</div>

也不要重复 jQuery 查询：

$(".block:nth-child(7)").mouseenter(function () {
    $(this).addClass("permahover");
});

或者，如果您想将 .permahover class 添加到子元素，您可以这样做：

$(".block:nth-child(7)").mouseenter(function () {
    $(" > *", this).addClass("permahover");
});

Answer 2

您的 CSS 规则指定了一个 .block class，它是第 7 个具有 class .permahover 子元素的子元素。我想你想要的是：

.block:nth-child(7).permahover { ... }

这指定了一个同时具有 .block 和 .permahover class 元素的第 7 个子元素。

使用 jQuery addclass 添加 CSS 子类

Add CSS subclass with jQuery addclass

javascript

css

jquery

addclass

subclass