Noah Blake 2021-03-29 21:48 采纳率: 66.7%
浏览 1482
已采纳

想实现鼠标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>
  • 写回答

5条回答 默认 最新

  • hfhan_872914334 2021-03-30 10:42
    关注

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

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(4条)

报告相同问题？

悬赏问题

  • ¥15 素材场景中光线烘焙后灯光失效
  • ¥15 请教一下各位，为什么我这个没有实现模拟点击
  • ¥15 执行 virtuoso 命令后，界面没有，cadence 启动不起来
  • ¥50 comfyui下连接animatediff节点生成视频质量非常差的原因
  • ¥20 有关区间dp的问题求解
  • ¥15 多电路系统共用电源的串扰问题
  • ¥15 slam rangenet++配置
  • ¥15 有没有研究水声通信方面的帮我改俩matlab代码
  • ¥15 ubuntu子系统密码忘记
  • ¥15 保护模式-系统加载-段寄存器