使用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之前的.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规则将在第7个.block内将一个与permahover类的子元素匹配。

<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类添加到子元素，则可以执行以下操作：

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

Answer 2

您的CSS规则指定一个.block类，该类是第7个子类，该子类具有一个带有.permahover类的子元素。 我认为您想要的是：

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

这指定了同时具有.block和.permahover类的元素，该元素是第7个子元素。