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

想实现鼠标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 画出的分类图不对,求解答一下
  • ¥20 springboot和springcloud版本问题
  • ¥15 ps2手柄控制树莓派小车
  • ¥30 C#:vsto powerpoint的外接程序
  • ¥30 stata将do文件代码转化为ado文件
  • ¥15 两个同维数组相比,不同位置、出现重复比无意义,而不同位置、不出现重复比,则有意义。把有意义的两个数组放入新的集合MK中。
  • ¥15 可以远程电脑安装nvm
  • ¥15 写一个可直接调用的函数,将32位有符号数转成另一个无符号的数
  • ¥15 CMAKE+VS2019+QT5.15.2组合进行二次编译
  • ¥15 nginx 配置静态html访问 ,后台登录时页面始终被重定向到登录页,无法访问到后台的静态html页