Изменения в 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: none; по умолчанию, но затем изменяется на display: block; при наведении мыши на родительский div. Проблема в том, что эта разметка появляется в нескольких местах на моем сайте, и я хочу, чтобы ребенок отображался только при наведении мыши на него родитель, а не если мышь находится над любым из других родителей (все они имеют одинаковое имя класса и не имеют идентификаторов).



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



$('.parent').hover(function(){

            $(this).children('.child').css("display","block");

        }, function() {

            $(this).children('.child').css("display","none");

        });
689   9  

9 ответов:

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

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

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

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

вот небольшой пример: Скрипка

218  
2014-03-20 22:24:14

нет необходимости использовать JavaScript или jquery, CSS достаточно:

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

СМОТРИТЕ ДЕМО

122  
2016-08-25 03:02:22

использовать toggleClass().

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

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

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

8  
2014-01-02 13:05:10 
.parent:hover > .child {
    /*do anything with this child*/
}
4  
2015-06-08 12:18:47

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

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

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

  • имеют другой цвет границы только один 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>
3  
2012-02-06 11:38:08

Стефана!--5--> - это правильно, но вот моя адаптация его ответ:

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.

2  
2017-05-23 15:34:29

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

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

это недостающая часть для создания липких выпадающих списков (которые не раздражают)

  • поведение в:
    1. оставайтесь открытыми при нажатии, закрывайте при повторном нажатии в любом другом месте на странице
    2. закрыть автоматически, когда мышь прокручивается из элементов меню.
1  
2014-11-01 06:01:51

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

.parent > div:nth-child(1) { display:none; }
.parent:hover > div:nth-child(1) { display: block; }
0  
2017-03-14 11:33:18

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

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

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

0  
2017-12-06 01:14:49

Comments

    Ничего не найдено.
Click here to cancel reply.