鼠标移动到某个区域 显示隐藏部分

代码如下:


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <style>
        .div1{
            height: 200px;
            width: 200px;
            background: #4cd864;margin: auto;
            position: relative;
        }
        .div2{
            width: 300px;
            height: 500px;
            position: absolute; margin: auto;
            background: #3059fa;
            display: none;
            left: 0;
            top:0;

        }
    style>

head>
<body>

<div class="div1">1div>
<div class="div2">2div>
body>
html>
<script src="jquery-1.12.4.js">script>
<script>
// var $div1=$('.div1'),
//     $div2=$('.div2')
var timer=null;
    $('.div1').mouseenter(function () {
        $('.div2').show()
    }).mouseleave(function () {
        timer=setTimeout(function () {
           $('.div2').hide()
        },2000)
    })
    $('.div2').mouseover(function () {
        clearTimeout(timer)
        $(this).show()
    }).mouseout(function () {
        $(this).hide()
    })
script>

你可能感兴趣的:(前端,jquery)