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 三因素重复测量数据R语句编写，不存在交互作用
  • ¥15 微信会员卡等级和折扣规则
  • ¥15 微信公众平台自制会员卡可以通过收款码收款码收款进行自动积分吗
  • ¥15 随身WiFi网络灯亮但是没有网络，如何解决？
  • ¥15 gdf格式的脑电数据如何处理matlab
  • ¥20 重新写的代码替换了之后运行hbuliderx就这样了
  • ¥100 监控抖音用户作品更新可以微信公众号提醒
  • ¥15 UE5 如何可以不渲染HDRIBackdrop背景
  • ¥70 2048小游戏毕设项目
  • ¥20 mysql架构，按照姓名分表