个人中心
gpt4 book ai didi

html - "hover"选择器不能与 Flexbox 一起使用将下拉显示更改为 "none"

转载 作者：行者123 更新时间：2023-11-28 14:33:14 25 4
gpt4 key购买 nike

css 中的悬停选择器无法使子元素随 display: none 消失；

我尝试过不同的选择器，例如 + 它并没有真正起作用。我是一个彻头彻尾的菜鸟，对此感到抱歉。

*{
        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 http-equiv="refresh" content="180">
    
        <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>
选择产品时， child 应该消失。每当我在下拉列表上使用悬停时，我都可以让它们消失，但它似乎对 parent 不起作用。

最佳答案

你应该定位下一个兄弟元素

#products:hover + #dropdown

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

关于html - "hover"选择器不能与 Flexbox 一起使用将下拉显示更改为 "none"，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53905467/

25 4 0
文章推荐： html - 贴上导航栏跳转
文章推荐： internet-explorer - CSS 问题
文章推荐： html - 在 Bootstrap 中进行自定义更改的正确方法？
文章推荐： css - Aptana Studio 3 - 如何更改此命令(正则表达式替换)
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com