使用 jQuery addclass 添加 CSS 子类
Add CSS subclass with jQuery addclass
我正在尝试使用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 个子级。
相关文章:
- 是否可以从父类访问子类的属性
- 子类访问父类's闭包变量
- Javascript关键字搜索子类Div值
- CSS更改类样式管理面板
- 如何通过Prototype或jquery移除子类的父类基类
- JavaScript数组的子类化破坏了快速枚举
- 可以“;超级“;可以在子类的方法内部使用,在不直接引用的情况下调用相应的超类方法
- 具有子类的构造函数中的Object.freeze
- JavaScript—父类和子类/对象的此问题
- 更改css子元素导航树
- 事件侦听器 / CSS 伪类出现时滚动条
- Google Maps Javascript v3 自定义控件子类化标准控件
- 调用子类函数时调用的超类函数
- 在 Javascript 中更改 CSS 子类的值
- 子类化 Meteor.users() 以获得不同的用户类型
- 下划线扩展方法和结构.js子类
- 如何在 javascript 中从子类调用父方法
- 使用 jQuery addclass 添加 CSS 子类
- 使用javaScript更改子类的css样式
- 如果父类有特定的值,希望将CSS类添加到子类