Зміна 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>

Дочірня діва встановлена для відображення: немає; за замовчуванням, але потім змінюється для відображення: блок; коли миша навішується над батьківським дівом. Проблема полягає в тому, що ця розмітка з’являється в декількох місцях на моєму сайті, і я хочу, щоб дитина відображалася лише в тому випадку, якщо миша перебуває над її батьком, а не якщо миша над будь-яким з інших батьків (усі вони мають один клас ім’я та відсутність ідентифікаторів).

Я намагався використовувати $(this)і .children()безрезультатно.

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

— Хартлі Броді
джерело

260

Чому б просто не використовувати 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

— Стівен
джерело

цей код не працює для мене. чи слід говорити ".parent.hover", а не ".parent: hover" ?? випадку я ніколи не бачив того, що ти мав раніше. і чи не вказується кома на кілька селекторів, що мають однакові стилі? я не бачу, як це допомагає тут. трохи більше інформації про цей CSS, por favor 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

У мене є те, що, на мою думку, є кращим рішенням, оскільки воно масштабується на більше рівнів, скільки хоче, а не лише два-три.

Я використовую бордюри, але це також можна зробити із потрібним стилем whateever, як-от фоновий колір.

Що стосується кордону, ідея полягає в тому, щоб:

Майте інший колір межі лише одного діва, діва над тим, де знаходиться миша, а не на жодному з батьків, не на жодній дитині, тому його можна побачити лише в такому кольорі дива іншого кольору, а решта залишається на білому.

Ви можете перевірити його за адресою: 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
джерело

Це не робить те, що задається питанням. Він змінює межу навколо елемента, який завис над. Не межа навколо дочірньої стихії.

— jenniwren

2

Якщо ви користуєтеся стилем Twitter Bootstrap і базовим JS для випадаючого меню:

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

Цей фрагмент відсутній, щоб створити липкі спадні місця (які не дратують)

Поведінка:
1. Залишайтеся відкритими при натисканні, закривайте, коли клацніть ще раз де-небудь ще на сторінці
2. Закривається автоматично, коли миша прокручується з елементів меню.

— R Тобін
джерело

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; }

— хамбой75
джерело