Что такое селектор CSS для немедленного и прецедентного брата?

У меня есть DOM дерево, глядя, как, что (скажем, эти имена классов):Что такое селектор CSS для немедленного и прецедентного брата?

контейнер
- my_label
- my_span
- my_sub-контейнер

На hover на container, my_label. Селектор .container:hover .my_label

Я хочу добавить еще одно правило, для того, чтобы скрыть my_label если my_sub-container на hover, а также.

Как применить стиль к my_label если my_sub-container:hover является не прецедента или непосредственным брат моего лейбла?

источник

2015-10-30 Billybobbonnet

Существует не один ... CSS не может выбрать * вверх * DOM. Кроме того, как вы одновременно наводите два элемента? Непонятно, что вы действительно спрашиваете. Вы предлагаете альтернативную структуру HTML ... и если да, то что? –

Как сказал @Paulie_D, выбор дома еще невозможен. Однако этот ответ имеет свое решение: http://stackoverflow.com/a/15503444/3909886 Вместо этого вы можете использовать jquery, чтобы найти ярлык и скрыть его при наведении подконтейнера, вам понравилось бы это решение? –

@Paulie_D Если вы наведите указатель на дочерний элемент, родитель также будет виден. То, что хочет OP, - отображать '.my_label', если где-нибудь внутри' .container' завис, ** EXCEPT ** '.my_sub-container' – Matheus208

Такая функциональность не может быть достигнута только с помощью CSS, поскольку CSS не имеет обратных селекторов. Вместо этого вы хотите использовать JavaScript/jQuery. Взгляните на .hover() и show()/hide() или fadeIn()/fadeOut().

источник

2015-10-30 11:52:51 Justas

В этом случае стоит искать '.siblings()'. – Shikkediel

К сожалению, как говорит Pauli_D, вы не сможете сделать это с помощью CSS, так как он не может выглядеть «вверх» в HTML, только вниз и внутри себя.

Способ сделать это, добавив немного jQuery, а затем сообщив, что нужно делать. В моей скрипке я добавил .hover(), который переключает класс и делает div прозрачным. Check it out here.

JQuery

$(".my_sub-container").hover(function(){ //when hovered 
    $('.my_label').toggleClass('hidden'); //do this 
});

Конечно, если вы еще не добавили Jquery на страницу еще не делают это исключительно для этой функции, но использовать ванильный Javascript, чтобы сделать то же самое. Это займет еще несколько строк, но это просто добавляет библиотеку для чего-то такого простого: D

источник

2015-10-30 12:00:06 Rvervuurt

Что такое селектор CSS для немедленного и прецедентного брата?

ответ

Смежные вопросы