使用 jQuery addclass 添加 CSS 子类

Add CSS subclass with jQuery addclass

本文关键字：CSS 子类 添加 addclass jQuery 使用      更新时间：2023-09-26

我正在尝试使用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）？

不能将伪类添加到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规则将子元素与第 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");
});

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

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

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

相关文章：