Изменение CSS дочернего элемента при зависании родительского элемента

Прежде всего, я предполагаю, что это слишком сложно для CSS3, но если где-то там есть решение, я бы предпочел воспользоваться этим.

HTML довольно прост.

<div class="parent">
    <div class="child">
        Text Block 1
    </div>
</div>

<div class="parent">
    <div class="child">
        Text Block 2
    </div>
</div>

Дочерний div настроен на отображение: нет; по умолчанию, но затем изменяется на display: block; когда указатель мыши находится над родительским div. Проблема в том, что эта разметка появляется в нескольких местах на моем сайте, и я хочу, чтобы дочерний элемент отображался только в том случае, если указатель мыши находится над его родителем, а не если указатель мыши находится над любым из других родителей (все они имеют один и тот же класс имя и без идентификаторов).

Я безуспешно пытался использовать $(this) и .children().

$('.parent').hover(function(){
            $(this).children('.child').css("display","block");
        }, function() {
            $(this).children('.child').css("display","none");
        });

jquery css parent jquery-selectors
person Hartley Brody    schedule 21.02.2011    source источник

Ответы (8)


arrow_upward
297
arrow_downward

Почему бы просто не использовать CSS?

.parent:hover .child, .parent.hover .child { display: block; }

а затем добавьте JS для IE6 (например, внутри условного комментария), который не поддерживает: hover должным образом:

jQuery('.parent').hover(function () {
    jQuery(this).addClass('hover');
}, function () {
    jQuery(this).removeClass('hover');
});

Вот краткий пример: Fiddle

person Stephen    schedule 21.02.2011
comment
этот код не работает для меня. должно быть сказано .parent.hover, а не .parent: hover ?? случай, я никогда не видел того, что у тебя есть раньше. и разве запятая не указывает на несколько селекторов, использующих одни и те же стили? Я не понимаю, как это здесь помогает. немного больше информации об этом CSS, в пользу 0 =] - person Hartley Brody; 21.02.2011
comment
:hover - один из динамических псевдоклассов, определенных CSS2 (здесь спецификации). Вот краткий пример: http://jsfiddle.net/5FLr4/. меня устраивает. - person Lee; 21.02.2011
comment
ааа большое спасибо! у меня действительно было какое-то относительное позиционирование, которое выталкивало дочерний текст из поля зрения ... да! ›.‹ Ценю помощь! - person Hartley Brody; 21.02.2011
comment
По-видимому, это не сработает для .child :: - webkit-scrollbar-thumb, если вы хотите изменить выделение полосы прокрутки внутри дочернего элемента. - person thdoan; 18.10.2012
comment
.parent:not(:hover) .child { display: none; }, похоже, у меня хорошо работает, хотя меня, конечно, не беспокоит IE6. Но таким образом я могу использовать его для элементов, для которых я не хочу иметь универсальное свойство display. - person Blair Connolly; 07.12.2015
comment
Он делает именно то, что я ищу, за исключением того, что меняет все дочерние элементы, а не только тот, который находится над - person Marek Barta; 24.12.2019
comment
@MarekBarta, почему бы вам тогда просто не использовать: hover для дочернего элемента? Вы видите то, о чем просили! - person Henrique Donati; 26.06.2020

arrow_upward
163
arrow_downward

Не нужно использовать JavaScript или jquery, достаточно CSS:

.child{ display:none; }
.parent:hover .child{ display:block; }

СМОТРЕТЬ ДЕМО

person Ali Adravi    schedule 14.11.2012

arrow_upward
9
arrow_downward

Используйте 1_.

$('.parent').hover(function(){
$(this).find('.child').toggleClass('color')
});

где color - класс. Вы можете стилизовать класс по своему усмотрению, чтобы добиться желаемого поведения. Пример демонстрирует, как класс добавляется и удаляется при наведении и удалении указателя мыши.

Ознакомьтесь с рабочим примером здесь.

person Hussein    schedule 21.02.2011

arrow_upward
3
arrow_downward

Ответ Стивена правильно, но вот моя адаптация его ответа:

HTML

<div class="parent">
    <p> parent 1 </p>
    <div class="child">
        Text Block 1
    </div>
</div>

<div class="parent">
    <p> parent 2 </p>
    <div class="child">
        Text Block 2
    </div>
</div>

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.

person Roger Roelofs    schedule 21.02.2011

arrow_upward
3
arrow_downward

У меня есть то, что я считаю лучшим решением, поскольку оно масштабируется до большего количества уровней, сколько угодно, а не только двух или трех.

Я использую границы, но это также можно сделать в любом желаемом стиле, например, в цвете фона.

Идея границы заключается в следующем:

  • Иметь другой цвет границы только для одного div, div над местом, где находится мышь, а не на каком-либо родительском элементе, а не на любом дочернем элементе, поэтому может быть видна только такая граница div другого цвета, а остальные остаются на белом.

Вы можете протестировать его по адресу: http://jsbin.com/ubiyo3/13.

А вот код:

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Hierarchie Borders MarkUp</title>
<style>

  .parent { display: block; position: relative; z-index: 0;
            height: auto; width: auto; padding: 25px;
          }

  .parent-bg { display: block; height: 100%; width: 100%; 
               position: absolute; top: 0px; left: 0px; 
               border: 1px solid white; z-index: 0; 
             }
  .parent-bg:hover { border: 1px solid red; }

  .child { display: block; position: relative; z-index: 1; 
           height: auto; width: auto; padding: 25px;
         }

  .child-bg { display: block; height: 100%; width: 100%; 
              position: absolute; top: 0px; left: 0px; 
              border: 1px solid white; z-index: 0; 
            }
  .child-bg:hover { border: 1px solid red; }

  .grandson { display: block; position: relative; z-index: 2; 
              height: auto; width: auto; padding: 25px;
            }

  .grandson-bg { display: block; height: 100%; width: 100%; 
                 position: absolute; top: 0px; left: 0px; 
                 border: 1px solid white; z-index: 0; 
               }
  .grandson-bg:hover { border: 1px solid red; }

</style>
</head>
<body>
  <div class="parent">
    Parent
    <div class="child">
      Child
      <div class="grandson">
        Grandson
        <div class="grandson-bg"></div>
      </div>
      <div class="child-bg"></div>
    </div>
    <div class="parent-bg"></div>
  </div>
</body>
</html>
person z666zz666z    schedule 06.02.2012
comment
Это не соответствует заданному вопросу. Он изменяет границу вокруг элемента, над которым наведен курсор. Не граница вокруг дочернего элемента. - person jenniwren; 25.10.2019

arrow_upward
3
arrow_downward

Не уверен, есть ли для этого ужасные причины, но, похоже, он работает со мной в последней версии Chrome / Firefox без каких-либо видимых проблем с производительностью с довольно большим количеством элементов на странице.

*:not(:hover)>.parent-hover-show{
    display:none;
}

Но в этом случае все, что вам нужно, - это применить parent-hover-show к элементу, а обо всем остальном позаботятся, и вы можете сохранить любой тип отображения по умолчанию, который вы хотите, без того, чтобы он всегда был «блочным» или создавал несколько классов для каждого типа.

person Brian Leishman    schedule 05.12.2017

arrow_upward
2
arrow_downward

Если вы используете стиль Twitter Bootstrap и базовый JS для раскрывающегося меню:

.child{ display:none; }
.parent:hover .child{ display:block; }

Это недостающий элемент для создания липких выпадающих списков (которые не раздражают).

  • The behavior is to:
    1. Stay open when clicked, close when clicking again anywhere else on the page
    2. Закрываться автоматически, когда мышь покидает элементы меню.
person R Tobin    schedule 01.11.2014

arrow_upward
2
arrow_downward

Чтобы изменить его с css, вам даже не нужно устанавливать дочерний класс

.parent > div:nth-child(1) { display:none; }
.parent:hover > div:nth-child(1) { display: block; }
person hamboy75    schedule 14.03.2017