jquery - 使用 Checkbox 激活 CSS Pseudo

标签 jquery css pseudo-class

我不确定这是否可能。但基本上我是在使用伪元素来滑入额外的内容。这非常有效。但是,我还想做的是使它出现并在勾选复选框或单选按钮时保留。是否可以使用复选框来欺骗 Pseduo 状态。

基本上我想要一个复选框来触发一个活跃的 Pseduo 状态。

任何人都可以建议在不过多改变当前设置的情况下执行此操作的最佳方法

.client-link.has-content:target .client:after,
.client-link.has-content:active .client:after,
.client-link.has-content:focus .client:after {
left:50%;
}

谢谢大家

最佳答案

是的,但是您需要将带有 :after CSS 的元素直接放在复选框之后,并使用相邻的兄弟选择器 + 来定位它(如我的回答),或者你可以把它放在复选框后面的任何地方,并使用通用的兄弟选择器 ~ 来定位它。

input[type="checkbox"]:checked + .foo:after {
  content: 'foo';
}
<input type="checkbox">
<div class='foo'></div>

关于jquery - 使用 Checkbox 激活 CSS Pseudo,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43965956/

相关文章:

javascript - iframe css src 更改,如果父 css src 更改

javascript - 如何制作可扩展的聊天输入表单

CSS 将通配符应用于伪类

html - 删除同一父 div 中其他子项的类

php - CodeIgniter Controller - JSON - AJAX

css - 使用 ng-click 存储和调用类

html - 伪类::before - 创建 css 圆

css - :最后的伪类未按预期运行

javascript - 如何声明一个 JavaScript 列表变量以便稍后填充?

javascript - jQuery 循环遍历子 div