当您点击时,您会看到父
:active
伪类被触发。是否有一种纯CSS(或某些JS库)的方法,使:active
伪类在button
点击时不会切换?
我尝试了z-index
,position: absolute & fixed
等方法,但没有成功。
根据规范:
选择器并未定义如果元素的父级处于“:active”或“:hover”状态,该元素是否也处于该状态。
这意味着它取决于实现。如果一个实现选择以这种方式操作(正如当前的浏览器所做的),则标准中没有任何东西可以改变它。
使用CSS4,您可能能够执行以下操作:
.parent:active:not(:has(:active)) {
color: red;
}
但目前这还不可用,也还没有最终确定。
我认为伪类:has
永远不会在样式表中得到应用。如果浏览器最终决定实现它,它可能只适用于JS API,如querySelector
。
然而,我对:focus-within
更有希望,因为它似乎更容易实现。
#parent:active:not(:focus-within) {
background-color: red;
}
#parent
的:active
。您可以通过添加tabindex =“-1”
使其他元素具有焦点。:focus-within
并没有得到广泛支持,但是您可以使用JS polyfill。
#parent {
border: 1px solid black;
width: 300px;
height: 300px;
}
#parent:active:not(.focus-within) {
background-color: red;
}
<script src="https://gist.githubusercontent.com/aFarkas/a7e0d85450f323d5e164/raw/"></script>
<div id="parent">
<button>Click me</button>
<p tabindex="-1">Or me</p>
</div>
Github不允许热链接,所以以上代码片段可能无法正常工作,除非您将polyfill复制到自己的服务器并使用它。
如果你真的想只使用CSS解决这个问题:
如果你的按钮是active
,添加一个:before
伪元素,并使用position: absolute;
给:before设置与父元素相同的背景。
button:active::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #eee;
z-index: -1;
}
position: relative;
z-index: 0;
.container {
position: relative;
width: 200px;
height: 200px;
}
.background {
position: absolute;
width: 100%;
height: 100%;
border: 1px solid black;
background-color: #eee;
}
.background:active {
background-color: red;
}
button {
position: relative;
}
<div class="container">
<div class="background"></div>
<button>Click me!</button>
</div>
这种方法可能适用于您,但这是我使用纯CSS实现的方式。唯一的注意事项是依赖于focus-within
,该属性不受IE或Edge支持。
.parent {
transition: background-color;
}
.parent:active:not(:focus-within) {
background-color: red;
transition-delay: 1ms; // Delay one cycle to allow child to focus
}
animation delay: 1ms
将以同样的方式工作。tabindex=-1
属性并使用.parent {
transition: background-color;
}
.parent:active:focus {
background-color: red;
}
tabindex=0
或任何值而不是-1
。但是没有使用JS。focus-within
,但这将超出“仅CSS”的范围。.parent {
transition: background-color;
}
.parent[tabindex]:active:focus {
background-color: red;
}
.parent:active:not(:focus):not(:focus-within) {
background-color: red;
transition-delay: 1ms;
}
这适用于IE11,Edge和Chrome浏览器。
这里提供了一个jQuery解决方案,而不是使用CSS伪类:active
$(document).ready(function() {
$('button').mousedown(function(e){
e.stopPropagation();
console.log('i got clicked');
});
$('div').mousedown(function(e){
$('div').css('background', 'red')
}).mouseup(function(e){
$('div').css('background', '#eee')
});
$(document).mouseup(function(e){
$('div').css('background', '#eee')
});
});
div {
width: 200px;
height: 200px;
background-color: #eee;
border: 1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<button>Qlick me</button>
</div>
:active
CSS选择器切换为activated
,这是否适合您的需求? - indubitablee:active 伪类适用于用户激活元素的时候。例如,在用户按下并释放鼠标按钮之间的时间内。在拥有多个鼠标按钮的系统中,:active 仅适用于主要或主要激活按钮(通常是“左”鼠标按钮)和任何别名。
可能存在文档语言或实现特定的限制,规定哪些元素可以成为 :active。例如,[HTML5] 定义了一个可激活元素的列表。
匹配 :active 元素的父元素也会匹配 :active。 因此,没有办法
CSS伪元素非常有用--它们允许我们创建CSS三角形以进行工具提示和执行许多其他简单任务,同时避免了需要额外的HTML元素。到目前为止,这些伪元素CSS属性无法被JavaScript访问,但现在有一种方法可以获取它们!
看看这个:
应该编写div:active:not(:hover) {...}
而不是div:active {...}
,这样就可以保持background-color
不变。
(删除旧片段)
更新
为了保持主要div
的行为不变并采用更通用的方法,我通常会创建几个图层。
请查看下面的片段,切换到green
只是为了证明它的工作原理,而position
和absolute
现在只是简单粗暴的:
#layer-data {
width: 200px;
height: 200px;
background-color: #eee;
border: 1px solid black;
}
#layer-data:active {
background-color: red
}
#layer-btns:active {
background-color: green
}
#layer-btns {
z-index: 1;
position: absolute;
top: 1px;
left: 1px;
background: transparent;
padding: 5px;
width: auto;
height: auto
}
#layer-data {
z-index: 0;
position: absolute;
top: 0;
left: 0;
text-align: center;
line-height: 200px
}
<div id="layer-btns">
<button>Qlick me</button>
<br/>
<button>Qlick me too</button>
<br/>
<button>Qlick me three</button>
</div>
<div id="layer-data">
some data-layer
</div>
:active
的效果,但它不应该失去。 - knitevision
:active
? - Amitdiv
有它自己的:active
状态,不应该在它的子元素点击时触发。 - knitevision