javascript - 使用 jQuery addclass 添加 CSS 子类

Question

我正在尝试使用 jQuery 向类添加子类，我的 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");
});

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

Answer 1

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

但对于您的问题，您甚至不需要它，您应该只删除 .permahover 之前的空格

.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
}

如果您将空格留在那里，您的 CSS规则将匹配带有 permahover 的子元素在你的第 7 课内 .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>
    <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");
});