Не работает менюшка на CSS

Ваалентин Семенович · August 17, 2020

Привет всем. Делаю менюшку. Есть такая идея. чтобы при наведении на видимы блок срабатывал :hover

и появлялся скрытый блок. (Типа выпадающего меню)

Все вроде логично, но не работает... Подскажите пожалуйста, что я делаю не так.

Код такой:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Имя</title>
<style>
.div1{
border: 4px solid black;
width: 200px;
}

.div2{
display: none; 
}

.div1:hover .div2{
display: block; 
border: 4px solid black;
width: 200px;
}


</style>
</head>
<body>
<div class="div1">
Меню
</div>
<div class="div2">Фрукты
</div>
</body>
</html>

klierik · August 17, 2020

Здравствуйте.

Когда Вы описываете структуру:

.div1 .div2 {}

Ожидается что .div2 — это дочерний элемент .div1, а именно:

<div class="div1">
  Меню
  
  <div class="div2">Фрукты</div>
</div>

В таком случае при наведение на .div1:hover будут срабатывать указанные Вами стили.

Ваалентин Семенович · August 17, 2020

Благодарю за ответ. А если я не хочу чтобы была вложенность. Возможно ли как-то реализовать :hover

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

Или так нельзя?

klierik · August 17, 2020

Для таких целей целесообразно использовать JavaScript

Хотя, обращу внимание, на то что следующий подход используется повсеместно:

Скрытый текст


<nav class="menu">
    <div class="menu-item parent">
        <a href="#" class="menu-item-link">Woman</a>

        <div class="menu-item-dropdown">
            <ul class="submenu">
                <li class="submenu-item">
                    <a href="#" class="submenu-link">Tops</a>
                </li>
                <li class="submenu-item">
                    <a href="#" class="submenu-link">Bottoms</a>
                </li>
            </ul>
        </div>
    </div>

    <div class="menu-item parent">
        <a href="#" class="menu-item-link">Man</a>

        <div class="menu-item-dropdown">
            <ul class="submenu">
                <li class="submenu-item">
                    <a href="#" class="submenu-link">Tops</a>
                </li>
                <li class="submenu-item">
                    <a href="#" class="submenu-link">Bottoms</a>
                </li>
            </ul>
        </div>
    </div>

    <div class="menu-item parent">
        <a href="#" class="menu-item-link">Gear</a>

        <div class="menu-item-dropdown">
            <ul class="submenu">
                <li class="submenu-item">
                    <a href="#" class="submenu-link">Gear</a>
                </li>
                <li class="submenu-item">
                    <a href="#" class="submenu-link">Fitness Equipment</a>
                </li>
            </ul>
        </div>
    </div>

    <div class="menu-item">
        <a href="#" class="menu-item-link">Sale</a>
    </div>
</nav>

CSS:


.menu .menu-item.parent:hover .menu-item-dropdown {
    display: block;
}

SASS/LESS:


.menu {
    .menu-item {
        &:hover {
            .menu-item-dropdown {
                display: block;
            }
        }
    }
}

Sign In

Не работает менюшка на CSS

Recommended Posts

Ваалентин Семенович

Link to comment

Share on other sites

klierik

Link to comment

Share on other sites

Ваалентин Семенович

Link to comment

Share on other sites

klierik

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information