失控的比卡丘 2015-11-17 07:20 采纳率: 100%
浏览 1282
已采纳

事件绑定怎么使用，求大神，在线等！！！！！

我想让隐藏层在两个条件下消失。
1：点击页面空白时消失
2：鼠标移到另外一个li的时候显示当前li的隐藏层。把其他的隐藏层全部隐藏

 <html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
    <style type="text/css">
*{padding:0;margin: 0;}
li{width: 200px;height: 50px;background:#333;position: relative;margin-top: 10px;}
div{position:absolute;right:-110px;top:0;width: 100px;height: 50px; z-index:2;background: yellow;display: none;}
    </style>
</head>
<body>

<ul>
    <li>11111
        <div>隐藏层</div>
    </li>
    <li>2222
        <div>隐藏层</div>
    </li>
    <li>333
        <div>隐藏层</div>
    </li>
    <li>444
        <div>隐藏层</div>
    </li>
    <li>555
        <div>隐藏层</div>
    </li>
</ul>

<script type="text/javascript">
$(document).ready(function(){
    $("li").hover(function(){
        $(this).find("div").show();
    },function(){
        $(this).find("div").hide();
    })
});
 </script>

</body>
</html>
  • 写回答

2条回答 默认 最新

  • Evankaka 博客专家认证 2015-11-17 11:06
    关注

    CSS伪类:
    :hover 当鼠标悬浮在元素上方时，向元素添加样式。

     <html>

<head>
    <style>
    * {
        margin: 0;
        padding: 0;
    }
    ul {
        list-style: none outside none;
    }
    .abc li:hover {
        background-color: #888;
        color: #fff;
    }
    </style>
</head>

<body>
    <div id="abc" class="abc">
        <ul>
            <li>aaaa</li>
            <li>aaaa</li>
            <li>aaaa</li>
            <li>aaaa</li>
            <li>aaaa</li>
        </ul>
    </div>
</body>

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

报告相同问题？

悬赏问题

  • ¥15 stm32开发clion时遇到的编译问题
  • ¥15 lna设计 源简并电感型共源放大器
  • ¥15 如何用Labview在myRIO上做LCD显示？(语言-开发语言)
  • ¥15 Vue3地图和异步函数使用
  • ¥15 C++ yoloV5改写遇到的问题
  • ¥20 win11修改中文用户名路径
  • ¥15 win2012磁盘空间不足,c盘正常，d盘无法写入
  • ¥15 用土力学知识进行土坡稳定性分析与挡土墙设计
  • ¥70 PlayWright在Java上连接CDP关联本地Chrome启动失败,貌似是Windows端口转发问题
  • ¥15 帮我写一个c++工程