diaplay none or block

一般电商网站都会有banner的列表,hover的时候会出现div,会根据li的内容的而改变而改变div的内容,如果div只是展示内容,不做其他的点击要求,这样show()就可以了;
但是,如果div的内容里面如果有点击事件,就要求鼠标移入到div的时候,div可以移入,而不是离开li的时候div hide();

有两种方法;一种是搭建页面的时候把div搭建成li的子集,再一种添加事件的时候,不要添加hover,添加mouseenter事件.
以下是点击显示与隐藏,

<style>
    .box1{
        width:500px;
        height: 500px;
        background: #ccc;
        position: absolute;
        z-index: 99;
        display: none;
        top:0;
        left:0;
    }
    </style>
</head>
<body>
    <div class="box">
        <p>新建</p>
    </div>
    <div class="box1">
        <span>确定</span>
    </div>
</body>
<script src="jquery.min.js"></script>
<script>
    $("p").on("click",function(){
        $(".box1").css("display","block")
    })
    $("span").on("click",function(){
        $(".box1").css("display","none")
    })
</script>

最后编辑于：2017.12.11 05:39:26

diaplay none or block

推荐阅读更多精彩内容