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

想实现鼠标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标签去掉

    1 打赏 评论
  • random1123 2021-03-30 09:51

    你可以把list移到p1里

    1 打赏 评论
  • 开发者小峰 2021-03-30 00:00

    用js写事件函数

    打赏 评论
  • Lazy33 2021-03-30 01:23
    var div1 = document.getElementsByClassName("?????")[0];
        div1.addEventListener("mouseover",function(){
            var span = this.getElementsByTagName("span")[0];
            //然后给你想显示的盒子,用js添加样式
        },false);
    
    打赏 评论
  • 有问必答小助手 2021-03-30 10:20

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

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

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

    1 打赏 评论

相关推荐 更多相似问题