Как установить высоту дочернего элемента div при наведении курсора на родительский элемент div в css?

Question

Как установить высоту дочернего элемента div при наведении курсора на родительский элемент div в css?

0

Я создаю раскрывающееся меню, которое я хочу отобразить подменю, когда вы наводите курсор на одно из основных меню. Все child_menus имеют начальную высоту 0. Мой HTML выглядит примерно следующим образом...

<div class = "parent_menu">Parent 1
    <a href = "link"><div class = "child_menu">Child 1 text</div></a>
    <a href = "link"><div class = "child_menu">Child 2 text</div></a>
</div>

<div class = "parent_menu">Parent 2
    <a href = "link"><div class = "child_menu">Child 1 text</div></a>
    <a href = "link"><div class = "child_menu">Child 2 text</div></a>
</div>

Я знаю, что вы можете устанавливать свойства с помощью селектора :hover, но могу ли я сделать что-то вроде .parent_menu:hover THEN FIND.child_menu {height:auto;}

Кстати, я знаю, что могу сделать это в JavaScript, но в CSS тоже должен быть способ.

jas7457 17 дек. 2013, в 12:13

Источник

1

Предоставьте ссылку jsfiddle на ваш код в вопросе.
Nitesh 17 дек. 2013, в 10:16

Теги:

html

css

3 ответа

0

Попробуйте под кодом, он должен работать

.parent_menu:hover a.child_menu{
  height:auto;
}

Viken Patel 17 дек. 2013, в 08:43

0

Я думаю, вы могли бы что-то сказать:

.parent_menu:hover .child_menu {
  height: auto;
}

Попробуйте демо здесь: http://jsfiddle.net/M4NUP/

Florian Rachor 17 дек. 2013, в 07:52

Ещё вопросы

Предоставьте ссылку jsfiddle на ваш код в вопросе.

Banana-In-Black · Accepted Answer · 2013-12-17T08-49-00.000Z

Попробуй это:

http://jsfiddle.net/r83FD/1/

.parent_menu div {    
    height: 0;
    overflow: hidden;
}

.parent_menu:hover div {
    height: auto;
}

Ты мне нравишься больше, чем моя, потому что я забыл скрыть переполнение. Отлично сработано.
Отлично. Именно то, что мне было нужно, но я не мог понять. Спасибо!