Когда вы нажимаете button, вы видите, что для родительского div запускается псевдотекст :active. Есть ли чистый CSS (или некоторый JS-библиотека) способ :active псевдокласса, который не переключается на button нажмите?
Я пробовал z-index, position: absolute & fixed и не имел успеха.
Из spec:
Селектор не определяет, является ли родительский элемент элемента:: active или:: hover также находится в этом состоянии.
Это означает, что он зависит от реализации. Если реализация решила действовать таким образом (как очевидно текущие браузеры), в стандарте ничего не изменится.
С CSS4 вы могли бы сделать:
.parent:active:not(:has(:active)) {
color: red;
}
но это еще не доступно и не завершено.
Если вы действительно хотите решить это только с помощью CSS:
Если ваша кнопка active, добавьте :before -pseudo-element и position: absolute; укажите: перед тем, как тот же фон родителям.
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/
Это делает не решение основной проблемы, но является решением для вашей текущей проблемы.
Возможно, самый простой способ добиться того, что вы, вероятно, действительно хотите сделать, - это не помещать кнопку внутри 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>Я не думаю, что :has pseudo-class будет доступен в таблицах стилей. Если браузеры, наконец, решили реализовать его, вероятно, это будет только для JS API, таких как querySelector.
Однако у меня гораздо больше надежд на :focus-within, который кажется намного проще реализовать.
#parent:active:not(:focus-within) {
background-color: red;
}
Конечно, это будет предотвращать применение :active :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>здесь 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>Вместо div:active {...} вы должны ввести код div:active:not(:hover) {...}, а background-color останется нетронутым.
(старый фрагмент удален)
UPDATE
Чтобы сохранить основное поведение 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
}<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>Насколько я знаю, активное состояние будет пузыриться. Таким образом, все родительские узлы будут иметь активное состояние.
Поэтому я не имею теперь чистого решения CSS. Вы можете избежать решения javascript (которое, как я полагаю, является тем, что вы действительно после), путем изменения разметки, чтобы div, у которого есть активное состояние, больше не является родителем кнопки. Вы можете сделать их братьями и сестрами, например.
Часть CSS этого решения затем фиксирует макет, поэтому теперь кажется, что они являются сибилизациями, как то, что они делали, когда они были родительскими > дочерними.
Не видя скрипту того, с чем вы работаете, я не могу предложить вам более конкретное решение, которого я боюсь.
попробуйте это
HTML:
<div class="current" id="current">
<button id="btnclick" >Qlick me</button>
</div>
css script:
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
Активный псевдокласс применяется, когда пользователь активирует элемент. Например, между тем, как пользователь нажимает кнопку мыши и отпускает ее. В системах с несколькими кнопками мыши: активна применяется только к основной или основной кнопке активации (обычно это "левая" кнопка мыши) и любые ее псевдонимы.
Может существовать язык документа или конкретные ограничения реализации, по которым элементы могут стать: активными. Например, [HTML5] определяет список активируемых элементов.
Родитель элемента, который соответствует: active также соответствует: active. Итак, нет способа
Кажется, что CSS не подходит для обработки этого случая. (не уверен в CSS4, как предложил Амит.) Итак, вот путь JQuery.
Идея заключается в том, что вы обрабатываете события 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;
}
Псевдоэлементы CSS невероятно полезны - они позволяют нам создавать треугольники CSS для всплывающих подсказок и выполнять ряд других простых задач, одновременно предотвращая необходимость в дополнительных элементах HTML. К этому моменту эти свойства псевдоэлементного CSS были недоступны JavaScript, но теперь есть способ их получения!
Проверьте это: