问答博客标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
php
java
vue.js
git
html5
python
node.js
android
mysql
react.js
linux
ios
css
golang
spring
docker
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

css父级hover子级才有效，同级不行?如何解决?

头像
iapplus
    9185132383

    我想实现当我hover 列表li的时候，类menu-content能显示

    <div id="page">
    <header class="container" style=";box-shadow: 0 0 1px rgba(0,0,0,0.2);">
        <div style="display: flex;align-items:center;;height: 89px">
            <ul class="d-flex flex-row welock-nav px-3">
                <li class="mx-2"><a href="http://www.baidu.com">Products</a></li>
                <li class="mx-2"><a href="http://www.baidu.com">How it Works</a></li>
                <li class="mx-2"><a href="http://www.baidu.com">YouTube Reviews</a></li>
                <li class="mx-2"><a href="http://www.baidu.com">Contact us</a></li>
            </ul>
        </div>
    </header>
    <div class="menu-content" style="position: absolute;width: 100%;min-height: 100px;background-color: red;z-index: 1">
asd
    </div>
</div>
    css3
    阅读 2.2k
    5 个回答
    得票最新
    头像
    小神星
      23212

      如果是用css实现的话使用 + 类就可以解决。

      我这里采用的是js方法实现，首先给menu-content类的div加了一个display: none;之后获取ul和menu-content类元素，使用mouseenter和mouseleave就能解决。

      <!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <div id="page">
            <header class="container" style=";box-shadow: 0 0 1px rgba(0,0,0,0.2);">
                <div style="display: flex;align-items:center;;height: 89px">
                    <ul class="d-flex flex-row welock-nav px-3">
                        <li class="mx-2"><a href="http://www.baidu.com">Products</a></li>
                        <li class="mx-2"><a href="http://www.baidu.com">How it Works</a></li>
                        <li class="mx-2"><a href="http://www.baidu.com">YouTube Reviews</a></li>
                        <li class="mx-2"><a href="http://www.baidu.com">Contact us</a></li>
                    </ul>
                </div>
            </header>
            <div class="menu-content" style="position: absolute;width: 100%;min-height: 100px;background-color: red;z-index: 1;display: none;">
        asd
            </div>
        </div>
        <script>
            const ul = document.getElementsByTagName('ul')[0]
            let menuContent = document.getElementsByClassName('menu-content')[0]
            ul.onmouseenter = () => {
                menuContent.style.display = 'block'
            }
            ul.onmouseleave = () => {
                menuContent.style.display = 'none'
            }
        </script>
    </body>
</html>
      头像
      新手小白
        772350

        container和menu-content才是同级 ，同级可以用 + 类似下面
        .container:hover + .menu-content {display:block!important}

        头像头饰
        陟上晴明
          21.1k124691
          头像
          _XYZ111
            492243168

            可以试一些 :has 伪类 https://developer.mozilla.org/zh-CN/docs/Web/CSS/:has, 完整 html 代码如下

            <!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <style>
            .menu-content{
                display: none;
            }
            
            #page:has(li:hover)>.menu-content{
                display: block;
            }
        </style>
        <div id="page">
            <header class="container" style=";box-shadow: 0 0 1px rgba(0,0,0,0.2);">
                <div style="display: flex;align-items:center;;height: 89px">
                    <ul class="d-flex flex-row welock-nav px-3">
                        <li class="mx-2"><a href="http://www.baidu.com">Products</a></li>
                        <li class="mx-2"><a href="http://www.baidu.com">How it Works</a></li>
                        <li class="mx-2"><a href="http://www.baidu.com">YouTube Reviews</a></li>
                        <li class="mx-2"><a href="http://www.baidu.com">Contact us</a></li>
                    </ul>
                </div>
            </header>
            <div class="menu-content" style="position: absolute;width: 100%;min-height: 100px;background-color: red;z-index: 1">asd</div>
        </div>
    </body>
</html>
            头像
            BetaZhang
              31
              新手上路，请多包涵

              Keywords: 关系选择器 :has

              <div id="page">
    <style>
      .container:has(li:hover) + .menu-content{
        display: block;
      }
      
      .menu-content{
        display: none;
      }
    </style>
    <header class="container" style=";box-shadow: 0 0 1px rgba(0,0,0,0.2);">
        <div style="display: flex;align-items:center;;height: 89px">
            <ul class="d-flex flex-row welock-nav px-3">
                <li class="mx-2"><a href="http://www.baidu.com">Products</a></li>
                <li class="mx-2"><a href="http://www.baidu.com">How it Works</a></li>
                <li class="mx-2"><a href="http://www.baidu.com">YouTube Reviews</a></li>
                <li class="mx-2"><a href="http://www.baidu.com">Contact us</a></li>
            </ul>
        </div>
    </header>
    <div class="menu-content" style="position: absolute;width: 100%;min-height: 100px;background-color: red;z-index: 1">
asd
    </div>
</div>
              撰写回答
              你尚未登录，登录后可以
              • 和开发者交流问题的细节
              • 关注并接收问题和回答的更新提醒
              • 参与内容的编辑和改进，让解决方法与时俱进
              推荐问题
              宣传栏