单击button
时,您会看到父:active
触发了div
伪类。是否有{em>纯CSS (或某些JS库):active
伪类的方式没有在button
点击切换?
我尝试z-index
,position: absolute & fixed
但没有成功。
答案 0 :(得分:12)
来自spec:
选择器不会定义':active'或':hover'元素的父级是否也处于该状态。
这意味着它依赖于实现。如果一个实现选择以这种方式行事(正如当前浏览器显然那样),标准中没有任何内容可以改变它。
使用CSS4,您可以这样做:
.parent:active:not(:has(:active)) {
color: red;
}
但这既不可用也没有最终确定。
答案 1 :(得分:4)
如果你真的想用CSS 解决这个问题:
如果您的按钮为active
,请添加:before
- 伪元素,并使用position: absolute;
在与父母相同的相同背景之前提供: / p>
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;
看看:http://jsfiddle.net/s0at4w4b/4/
不解决了潜在问题,但它是您当前问题的解决方案。
答案 2 :(得分:2)
实现你可能 想要做的事情的最简单方法也许就是不要将按钮放在你不想激活的div
内。
在这里,您有一个容器div
,其中包含背景div
(相当于原始示例中的父div
)。后台div
具有与按钮分开的活动状态。
.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>
&#13;
答案 3 :(得分:1)
我认为样式表中不会有:has
伪类。如果浏览器最终决定实现它,它可能只适用于querySelector
等JS API。
但是,我对:focus-within
抱有更多希望,这似乎更容易实现。
#parent:active:not(:focus-within) {
background-color: red;
}
当然,只有在点击像按钮这样的可聚焦元素时才会阻止:active
应用于#parent
。您可以通过添加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复制到服务器并使用它,否则上面的代码段可能无效。
答案 4 :(得分:0)
这里是一个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')
});
});
&#13;
div {
width: 200px;
height: 200px;
background-color: #eee;
border: 1px solid black;
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<button>Qlick me</button>
</div>
&#13;
答案 5 :(得分:0)
而不是div:active {...}
,您应该代码div:active:not(:hover) {...}
而background-color
保持不变。
(删除旧代码段)
<强>更新强>
为了保持主div
行为的完整性和更通用的方法,我通常会创建多个层。
检查下面的代码段,切换到green
只是为了证明它可以正常工作,而position
和abolute
现在只是快速而且很脏:
#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
}
&#13;
<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>
&#13;
答案 6 :(得分:0)
据我所知,活跃的国家将会冒泡。所以所有父节点都将处于活动状态。
因此,我现在没有纯CSS解决方案。您可以通过更改标记来避免使用javascript解决方案(我假设您真正关注的是这样),以便具有活动状态的div不再是按钮的父级。例如,你可以让他们成为兄弟姐妹。
该解决方案的CSS部分然后修复布局,因此它们看起来是相同的,就像它们是父母&gt; child时所做的一样。
如果没有看到你正在使用的小提琴,我恐怕无法为你提供更具体的解决方案。
答案 7 :(得分:0)
试试这个
HTML:
<div class="current" id="current">
<button id="btnclick" >Qlick me</button>
</div>
css脚本:
div {
width: 200px;
height: 200px;
background-color: #eee;
border: 1px solid black;
}
.current_active{
background-color: red;
}
jquery的:
$("#btnclick").click(function(){
$("#current").toggleClass("current_active");
});
ps:包含jquery库文件
答案 8 :(得分:0)
:在用户激活元素时应用active伪类。例如,在用户按下鼠标按钮并释放它的时间之间。在具有多个鼠标按钮的系统上,:active仅适用于主要或主要激活按钮(通常是&#34;左侧&#34;鼠标按钮)及其任何别名。
可能存在文档语言或实现特定限制,哪些元素可以变为:活动。例如,[HTML5]定义了可激活元素的列表。
匹配的元素的父级:active也匹配:active。 所以,没有办法
答案 9 :(得分:0)
似乎没有任何CSS方式来处理这种情况。 (不确定CSS4,Amit建议的方式。)所以这是JQuery方式。
您的想法是在3个级别处理mousedown和mouseup事件:
HTML:
<div>
<button class="btn1">Qlick me1</button>
<button class="btn2">Qlick me2</button>
</div>
JQuery的:
$(function(){
$('div').each(function(e){
$(this).mousedown(function(e){
$(this).addClass("activeClass");
}).mouseup(function(e){
$(this).removeClass("activeClass");
});
});
$('div .btn1').each(function(e){
$(this).mousedown(function(e){
e.stopPropagation();
}).mouseup(function(e){
e.stopPropagation();
});
});
$('div :not(.btn1)').each(function(e){
$(this).mousedown(function(e){
$(this).parent().addClass("activeClass");
}).mouseup(function(e){
$(this).parent().removeClass("activeClass");
});
});
});
CSS:
div {
width: 200px;
height: 200px;
background-color: #eee;
border: 1px solid black;
}
.activeClass {
background-color: red;
}
答案 10 :(得分:0)
CSS伪元素非常有用 - 它们允许我们为工具提示创建CSS三角形并执行许多其他简单任务,同时防止需要额外的HTML元素。到目前为止,JavaScript无法访问这些伪元素CSS属性,但现在有了获取它们的方法!
检查一下:
答案 11 :(得分:0)
这可能适用于您,也可能不适合您,但这是我使用纯CSS实现它的方式。唯一需要注意的是IE或Edge不支持focus-within
的依赖。
.parent {
transition: background-color;
}
.parent:active:not(:focus-within) {
background-color: red;
transition-delay: 1ms; // Delay one cycle to allow child to focus
}
这里发生了什么,父元素将获得活动状态,被点击的孩子也是如此。唯一的区别是焦点将应用于子元素,但仅适用于下一个周期。要避免在此两步过程中的任何动画,请应用1毫秒的延迟。在下一个循环中,元素将处于活动状态,但焦点将应用于子元素。因此,父母不会应用过渡。我认为animation delay: 1ms
会以同样的方式运作。
另一种方法是为项目提供tabindex=-1
属性并使用
.parent {
transition: background-color;
}
.parent:active:focus {
background-color: red;
}
唯一的问题是它可能会改变键盘导航行为并依赖于某些HTML。如果您确实希望键盘导航使用tabindex=0
或-1
以外的任何值。但是没有使用JS。
focus-within
有一些很好的polyfill,你可以用于IE / Edge但是它会出现在&#34; CSS Only&#34;。
但是,我们可以将它们放在一起来创建它:
.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。