Изменение CSS-элемента дочернего элемента при зависании родительского элемента
Прежде всего, я предполагаю, что это слишком сложно для CSS3, но если там есть какое-то решение, я бы с удовольствием согласился с этим.
HTML довольно прост.
Text Block 1 Text Block 2 Детский div установлен для отображения: none; по умолчанию, но затем изменяется на отображение: block; когда мышь зависает над родительским div. Проблема заключается в том, что эта разметка появляется в нескольких местах на моем сайте, и я хочу, чтобы ребенок отображался, если мышь над родителем, а не если мышь находится над любым из других родителей (все они имеют один и тот же class имя и идентификаторы).
- Каков самый быстрый способ выбора элементов-потомков в jQuery?
- jQuery выбрать по classу VS выбрать по атрибуту
- Элемент или class LIKE для jQuery?
- Выбор индекса jQuery
- Как я могу определить, возвращает ли селектор null?
Я пробовал использовать $(this) и .children() безрезультатно.
$('.parent').hover(function(){ $(this).children('.child').css("display","block"); }, function() { $(this).children('.child').css("display","none"); });
- jQuery как найти элемент на основе значения атрибута данных?
- Должны ли все события jquery быть привязаны к $ (документу)?
- Включение / выключение флажков
- : nth-of-type () в jQuery / Sizzle?
- поиск jQuery и контекст
- Выбрать элемент по точному соответствию его содержимому
- полный календарный выбор ячейки на мобильном устройстве?
- Как получить выражение селектора jQuery в виде текста?
Почему бы просто не использовать CSS?
.parent:hover .child, .parent.hover .child { display: block; }
а затем добавить JS для IE6 (например, внутри условного комментария), который не поддерживает: правильно наведите курсор:
jQuery('.parent').hover(function () { jQuery(this).addClass('hover'); }, function () { jQuery(this).removeClass('hover'); });
Вот краткий пример: Fiddle
Нет необходимости использовать JavaScript или jquery, CSS достаточно:
.child{ display:none; } .parent:hover .child{ display:block; }
СМОТРЕТЬ ДЕМО
Используйте toggleClass() .
$('.parent').hover(function(){ $(this).find('.child').toggleClass('color') });
где color является classом. Вы можете стилизовать class так, как вам нравится, чтобы достичь желаемого поведения. В этом примере демонстрируется, как class добавляется и удаляется при вводе и выводе мыши.
Проверьте рабочий пример здесь .
.parent:hover > .child { /*do anything with this child*/ }
У меня есть то, что я считаю лучшим решением, так как оно масштабируется до большего количества уровней, сколько угодно, не только двух или трех.
Я использую границы, но это также можно сделать с желаемым стилем, например фоном.
С границей идея заключается в следующем:
- У другого цвета границы есть только один div, div над которым находится мышь, а не на любом родителе, а не на любом дочернем элементе, поэтому можно увидеть только такую границу div в другом цвете, в то время как остальная часть останется на белом.
Вы можете протестировать его по адресу: http://jsbin.com/ubiyo3/13
И вот код:
Hierarchie Borders MarkUp Parent Child Grandson
Ответ Стивена верен, но вот моя адаптация его ответа:
HTML
parent 1
Text Block 1 parent 2
Text Block 2
CSS
.parent { width: 100px; min-height: 100px; color: red; } .child { width: 50px; min-height: 20px; color: blue; display: none; } .parent:hover .child, .parent.hover .child { display: block; }
JQuery
//this is only necessary for IE and should be in a conditional comment jQuery('.parent').hover(function () { jQuery(this).addClass('hover'); }, function () { jQuery(this).removeClass('hover'); });
Этот пример можно увидеть в jsFiddle .
Если вы используете стиль Twitter Bootstrap и базовый JS для раскрывающегося меню:
.child{ display:none; } .parent:hover .child{ display:block; }
Это недостающая часть для создания липких выпадающих списков (которые не раздражают)
- Поведение:
- Оставайтесь открытыми, когда их щелкаете, закрывайте их при повторном нажатии в другом месте на странице
- Закройте автоматически, когда мышь прокручивается из элементов меню.
Чтобы изменить его из css, вам даже не нужно устанавливать дочерний class
.parent > div:nth-child(1) { display:none; } .parent:hover > div:nth-child(1) { display: block; }
Не уверен, есть ли какие-то страшные причины для этого или нет, но, похоже, он работает со мной в последней версии Chrome / Firefox без каких-либо видимых проблем с производительностью с довольно большим количеством элементов на странице.
*:not(:hover)>.parent-hover-show{ display:none; }
Но таким образом все, что вам нужно, это применить parent-hover-show к элементу, а остальное позаботится, и вы можете сохранить любой тип отображения по умолчанию, который вы хотите, без необходимости «блокировать» или создавать несколько classов для каждого типа ,