Question

我有一个父div包含子div，但是父div的mouseleave事件不能使用margin＆gt; 20px，当margin为＆gt; 20px mouseleave会因为离开子div而被触发。如何管理保证金~200px，以下是我的代码。

<head runat="server">
    <style type="text/css">
            .detail
            {
                display: none;
                height:200px;
                padding: 20px;
                border: solid 1px #888;
                width: 400px;
                position: absolute;
                z-index: 100;
                left: 20px;
                margin-top:100px;
                background-color: #888;
                opacity: .8;
            }
            .Container
            {
                width: 200px;
            }
            .menu
            {
                width: 50px;
                cursor:pointer;
            }
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
             <div class="Container">
                            <div class="menu">
                                List1</div>
                            <div class="detail">

                            </div>
                        </div>
        </div>

        </form>
    </body>
    <html>

和脚本是..

<script type="text/javascript">

$(document).ready(function(){

 $('.menu').mouseenter(function(){
   $(this).css('background-color','#DFDFDF');
   $(this).parent('div').find('.detail').show();
 })

  $('.Container').mouseleave(function(){

   $(this).find('.menu').css('background-color','');
   $(this).find('.detail').hide();
 })

})

</script>

Answer 1

试试这个： - http://jsfiddle.net/adiioo7/tCPFb/3/

position:relative类

使用position:absolute代替.detail

鼠标离开事件不能使用位置绝对和margin-top

1 个答案:

试试这个： - http://jsfiddle.net/adiioo7/tCPFb/3/