程式師世界 >> 編程語言 >> 更多編程語言 >> 編程綜合問答 >> javascritp-事件綁定怎麼使用，求大神，在線等！！！！！

javascritp-事件綁定怎麼使用，求大神，在線等！！！！！

編輯：編程綜合問答

事件綁定怎麼使用，求大神，在線等！！！！！

我想讓隱藏層在兩個條件下消失。
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>

最佳回答：

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>