Question

在css中悬停选择器无法使子元素在显示时消失：无;

我尝试了不同的选择器，例如+，但实际上并没有奏效。我对此感到完全抱歉。

*{
        margin: 0;
        padding: 0;
        /* Width and height apply to all parts of the element: content, padding and borders */
        box-sizing: border-box;
    }
    
    #menu{
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }
    
    #logo{
        height: 70px;
        width: 70px;
    }
    
    div nav{
        display: flex;
      /* This flexbox property lets button area to fill-in the remainin space until the logo area */
        flex: 1; 
    }
    
    div nav ul{
        display: flex;
        flex-direction: row;
        background-color: mediumaquamarine;
        justify-content: space-between;
        flex: 1; 
      /* This flexbox property lets button area to fill-in the remainin space until the logo area */
    }
    
    div nav ul li{
        display: flex; /* These 3 lines or the align the bottons vertically */
        flex-direction: column; /* These 3 lines or the align the bottons vertically */
        justify-content: center; /* These 3 lines or the align the bottons vertically */
        list-style-type: none;
        background-color: blue;
        flex: 1; 
      /* This flexbox property lets button area to fill-in the remainin space until the logo area */
        position: relative;
    }
    
    div nav ul li a{
        display: flex; /* These 3 lines or the align the bottons vertically */
        flex-direction: column; /* These 3 lines or the align the bottons vertically */
        justify-content: center; /* These 3 lines or the align the bottons vertically */
        text-decoration: none;
        background-color: orange;
        height: 50px;
        text-align: center;
        margin: 0.5px;
    }
    
    div nav ul li a:hover{
        background-color: #9f7934;
    }
    
    #dropdown{
        display: flex;
        flex-direction: column;
        width: 100%;
        top: 60px;
        position: absolute;
    }
    
    #products:hover #dropdown{
        display: none !important;
    }

<!DOCTYPE html>
    
    <html>
    
    <head>
    	<meta charset="UTF8">
    	<meta name="description" content="Aras Mühendislik Makina">
    	<meta name="keywords" content="Dik İşleme, CNC, Talaşlı İmalat">
    	<meta name="author" content="Aras">
    	<meta http-equiv="refresh" content="180">
    	<title>Aras Mühendislik Makina</title>
    
    	<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    	<link rel="stylesheet" href="style.css">
    </head>
    
    <body>
        <div id="menu">
            <img src="logo.jpg" alt="Smiley face" id="logo"> 
            <nav>
                <ul>
                    <li><a href="#">Anasayfa</a></li>
                    <li><a href="#">Hakkımızda</a></li>
                    <li><a href="#" id="products">Ürünler</a>
                        <ul id="dropdown">
                            <li><a href="#">Ürün 1</a></li>
                            <li><a href="#">Ürün 2</a></li>
                            <li><a href="#">Ürün 3</a></li>
                            <li><a href="#">Ürün 4</a></li>
                        </ul>
                    </li>
                    <li><a href="#">İletişim</a></li>
                </ul>
            </nav>
        </div>
    
    </body>
    
    </html>

https://jsfiddle.net/9z5m1kwb/

选择产品后，孩子应该消失。每当我将鼠标悬停在下拉列表上时，我都可以使它们消失，但它似乎不适用于父级。

Answer 1

我做了:) +选择器正在工作。

*{
    margin: 0;
    padding: 0;
    /* Width and height apply to all parts of the element: content, padding and borders */
    box-sizing: border-box;
}

#menu{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

#logo{
    height: 70px;
    width: 70px;
}

div nav{
    display: flex;
  /* This flexbox property lets button area to fill-in the remainin space until the logo area */
    flex: 1; 
}

div nav ul{
    display: flex;
    flex-direction: row;
    background-color: mediumaquamarine;
    justify-content: space-between;
    flex: 1; 
  /* This flexbox property lets button area to fill-in the remainin space until the logo area */
}

div nav ul li{
    display: flex; /* These 3 lines or the align the bottons vertically */
    flex-direction: column; /* These 3 lines or the align the bottons vertically */
    justify-content: center; /* These 3 lines or the align the bottons vertically */
    list-style-type: none;
    background-color: blue;
    flex: 1; 
  /* This flexbox property lets button area to fill-in the remainin space until the logo area */
    position: relative;
}

div nav ul li a{
    display: flex; /* These 3 lines or the align the bottons vertically */
    flex-direction: column; /* These 3 lines or the align the bottons vertically */
    justify-content: center; /* These 3 lines or the align the bottons vertically */
    text-decoration: none;
    background-color: orange;
    height: 50px;
    text-align: center;
    margin: 0.5px;
}

div nav ul li a:hover{
    background-color: #9f7934;
}

#dropdown{
    display: flex;
    flex-direction: column;
    width: 100%;
    top: 60px;
    position: absolute;
}

#products:hover + ul#dropdown{
    display:none;
}

<!DOCTYPE html>

<html>

<head>
    <meta charset="UTF8">
    <meta name="description" content="Aras Mühendislik Makina">
    <meta name="keywords" content="Dik İşleme, CNC, Talaşlı İmalat">
    <meta name="author" content="Aras">
    <meta http-equiv="refresh" content="180">
    <title>Aras Mühendislik Makina</title>

    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div id="menu">
        <img src="logo.jpg" alt="Smiley face" id="logo"> 
        <nav>
            <ul>
                <li><a href="#">Anasayfa</a></li>
                <li><a href="#">Hakkımızda</a></li>
                <li><a href="#"  id="products">Ürünler</a>
                    <ul id="dropdown">
                        <li><a href="#">Ürün 1</a></li>
                        <li><a href="#">Ürün 2</a></li>
                        <li><a href="#">Ürün 3</a></li>
                        <li><a href="#">Ürün 4</a></li>
                    </ul>
                </li>
                <li><a href="#">İletişim</a></li>
            </ul>
        </nav>
    </div>

</body>

</html>

“悬停”选择器不适用于Flexbox，以将下拉列表显示更改为“无”

1 个答案: