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

159

Прежде всего, я предполагаю, что это слишком сложно для 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 jquery-selectors parent Хартли броди
источник

Ответы:

260

Почему бы просто не использовать 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');
});

Вот быстрый пример: скрипка

Стивен
источник
этот код не работает для меня. это должно сказать ".parent.hover", а не ".parent: hover" ?? Я никогда не видел того, что у тебя есть. и не указывает ли запятая несколько селекторов, принимающих одинаковые стили? Я не вижу, как это помогает здесь. немного больше информации об этом CSS, por favour 0 =]
Хартли Броуди,
6
:hoverявляется одним из «Динамических псевдоклассов», определенных CSS2 ( вот спецификация ). Вот быстрый пример: http://jsfiddle.net/5FLr4/ . меня устраивает.
Ли
ааа спасибо большое! у меня действительно было некоторое относительное положение, которое выталкивало дочерний текст из поля зрения ... дох! >. <Я ценю помощь!
Хартли Броуди
Очевидно, это не будет работать для .child :: - webkit-scrollbar-thumb, если вы хотите изменить подсветку полосы прокрутки внутри дочернего элемента.
thoan
1
.parent:not(:hover) .child { display: none; }кажется, работает хорошо для меня, хотя я, конечно, не беспокоюсь о IE6. Но таким образом я могу использовать его для элементов, которые я не хочу иметь единообразное displayсвойство.
Блэр Коннолли
147

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

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

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

Али Адрави
источник
9

Использование toggleClass().

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

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

Проверьте рабочий пример здесь .

Хусейн
источник
7 
.parent:hover > .child {
    /*do anything with this child*/
}
Амир Рахман
источник
3

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

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 .

Роджер Рулофс
источник
3

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

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

С границей идея состоит в том, чтобы:

  • У другого цвета границы есть только один 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>
z666zz666z
источник
Это не делает то, что задал вопрос. Это меняет границу вокруг элемента, над которым находится курсор. Не граница вокруг дочернего элемента.
Дженниврен
2

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

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

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

  • Поведение заключается в следующем:
    1. Оставайтесь открытыми при нажатии, закрывайте при повторном нажатии в любом месте на странице
    2. Автоматически закрывается, когда мышь прокручивает элементы меню.
Р Тобин
источник
2

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

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

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

Брайан Лэйшман
источник
0

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

.parent > div:nth-child(1) { display:none; }
.parent:hover > div:nth-child(1) { display: block; }
hamboy75
источник