想实现鼠标Hover到一个元素上时，显示另一个元素

<html>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .guide{
            list-style: none;
        }
        .guide a,li{
            text-decoration: none;
            font-size: 0.5em;
            color:rgb(154, 155, 155);
        }
        .guide li{
            float: left;
            line-height:25px;
            display: block;
        }
        .background{
            background-color:rgb(220,221,223);
            width: auto;
            height:25px;
        }
        .position{
            margin-left: 150px;
            position:absolute;
            text-decoration: none;
        }
        .weclome{
            margin-left: 424px;
        }
        .login{
            margin-left: 10px;
            color:rgb(228, 45, 67);
        }
        
        .shopping{
            color:rgb(228, 45, 67);
        }
        .function li{
            margin-left: 8px;
            margin-right: 8px;
        }
        .shopdown{
            color:rgb(154, 155, 155);
        }
        .pos{
            color:rgb(228, 45, 67);
            font-size: 0.5em;
            line-height: 25px;
        }
        ul a li:hover{
            color:rgb(228, 45, 67);
        }
        #list{
            display: none;
            border: 1px  rgba(0,0,0,0.2) solid ;
            width: 300px;
            height: 420px;
            box-shadow:1px 1px 1px rgba(0,0,0,0.2);
            position: relative;
            left: 150px;
            top: 25px;
        }
        #p1:hover #list{
           display: block;//我想让这个显示出来怎么做到？？？为什么这样不行
        }
        .beijing{
            font-size: 0.5em;
            color:rgb(154, 155, 155);
            line-height: 25px;
        }
        
    </style>

    <body>
        <div class="background">
            <a href=""><div class="position" id="p1"><font class="pos">⇩</font><font class="beijing">北京</font></div></a>
            <ul class="guide">
            <a href=""><li class="weclome">你好，&nbsp请登录</li></a>
            <a href=""><li class="login">免费注册</li></a>
            <div class="function">
            <li>|</li>
            <a href=""><li class="dingdan">我的订单</li></a>
            <li>|</li>
            <a href=""><li class="mine">我的京东▾</li></a>
            <li>|</li>
            <a href=""><li class="shopping">企业采购<font class="shopdown">▾</font></li></a>
            <li>|</li>
            <a href=""><li class="vip">京东会员</li></a>
            <li>|</li>
            <a href=""><li class="sever">客户服务▾</li></a>
            <li>|</li>
            <a href=""><li class="webguide">网站导航▾</li></a>
            <li>|</li>
            <a href=""><li class="moiblejd">手机京东</li></a>
            </ul> 
            <div class="pinformation" id="list"></div>
        </div>
       
       
    <body>
</html>

上面有很多回答了，js和css都有，这种功能能用css还是建议css，css你是用的是子选择器`#p1:hover #list`，这就需要把list移动到p1里。除了子选择器还有兄弟选择器可以使用，比如`#p1:hover + #list`和`#p1:hover ~ #list`，但是这个还需要把p1外面的a标签去掉

你可以把list移到p1里

用js写事件函数

var div1 = document.getElementsByClassName("？？？？？")[0];
    div1.addEventListener("mouseover",function(){
        var span = this.getElementsByTagName("span")[0];
        //然后给你想显示的盒子，用js添加样式
    },false);

您好，我是有问必答小助手，你的问题已经有小伙伴为您解答了问题，您看下是否解决了您的问题，可以追评进行沟通哦~

如果有您比较满意的答案 / 帮您提供解决思路的答案，可以点击【采纳】按钮，给回答的小伙伴一些鼓励哦～～

ps:问答VIP仅需29元，即可享受5次/月有问必答服务，了解详情>>>https://vip.csdn.net/askvip?utm_source=1146287632