1

Не работает hover. Посмотрите пожалуйста.

.mother{
    margin: 54px 74px;
    width: 800px;
    height: 300px;
    border: 2px solid red;
}
.logo{
        margin: 30px 20px;
    width: 50px;
    height: 50px;
    border: 1px solid green;
}
.menu li{
    float: left;
    list-style: none;
    padding: 0;
    margin: 0;
    display: block;
}
.menu li{
    width: 180px;
    height: 35px;
    border: 1px solid black;
    text-align: center;
    display: none;
}

.logo :hover + .menu li{
    display: block;
}
<!DOCTYPE html>
<html>
<head>
    <title> new project</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <div class="mother">
        <div class="logo"></div>
        <ul class="menu">
            <li><a href="#">1</a></li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>

        </div>
    </div>

</body>
</html>

3 ответа 3

1

Лишний пробел оставили в этой строке: .logo:hover + .menu li{ -> .logo: hover + .menu li{

.mother{
    margin: 54px 74px;
    width: 800px;
    height: 300px;
    border: 2px solid red;
}
.logo{
        margin: 30px 20px;
    width: 50px;
    height: 50px;
    border: 1px solid green;
}
.menu li{
    float: left;
    list-style: none;
    padding: 0;
    margin: 0;
    display: block;
}
.menu li{
    width: 180px;
    height: 35px;
    border: 1px solid black;
    text-align: center;
    display: none;
}

.logo:hover + .menu li{
    display: block;
}
<!DOCTYPE html>
<html>
<head>
    <title> new project</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <div class="mother">
        <div class="logo"></div>
        <ul class="menu">
            <li><a href="#">1</a></li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>

        </div>
    </div>

</body>
</html>

2
  • Все получилось!!! Большое вам Спасибо за оперативный ответ! а то намучался я уже) 11 окт 2017 в 14:35
  • @ArtashesMuradyan Галочка слева - щёлк! :)
    – user176262
    12 окт 2017 в 21:10
1

Если между селекторами стоит пробел - это означает "элемент соответствующий селектору, находящийся в элементе соответствующем предыдущему селектору" т.е. у вас указано "при наведении на элемент в элементе с классом .logo". Если коротко - то просто удалите пробел между .logo и :hover

0

псевдокласс hover не является родителем элементов, грубо говор вы просто поставили пробел

.mother{
    margin: 54px 74px;
    width: 800px;
    height: 300px;
    border: 2px solid red;
}
.logo{
        margin: 30px 20px;
    width: 50px;
    height: 50px;
    border: 1px solid green;
}
.menu li{
    float: left;
    list-style: none;
    padding: 0;
    margin: 0;
    display: block;
}
.menu li{
    width: 180px;
    height: 35px;
    border: 1px solid black;
    text-align: center;
    display: none;
}

.logo:hover + .menu li{
    display: block;
}
<!DOCTYPE html>
<html>
<head>
    <title> new project</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <div class="mother">
        <div class="logo"></div>
        <ul class="menu">
            <li><a href="#">1</a></li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>

        </div>
    </div>

</body>
</html>

1
  • Спасибо! Кажется уловил) 12 окт 2017 в 20:23

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.