JQuery鼠标事件

CSS部分

<style>
    div {
        width: 200px;
        height: 200px;
        background-color: blueviolet;
    }
</style>

HTML部分

<div>
    <p style="width: 80px;height: 80px;background-color: burlywood;"></p>
</div>

JS部分

<script src="./jquery-1.12.4.js"></script>
<script>
    /* 鼠标指针移过时 */
    /* 进入div触发，不出去不触发 */
    $('div').mouseover(function(){
        console.log('mouseover鼠标指针移过时');
    })
    /* 鼠标指针移出时 */
    $('div').mouseout(function(){
        console.log('mouseout鼠标指针移出时');
    })

    /* 鼠标指针进入时 */
    $('div').mouseenter(function(){
        console.log('mouseenter鼠标指针进入时');
    })
    /* 鼠标指针离开时 */
    $('div').mouseleave(function(){
        console.log('mouseleave鼠标指针离开时');
    })

    /* 区别 */
    // mouseover 进入子元素的时候也触发
    // mouseenter 进入子元素的时候不触发
    // mouseout 进入子元素的时候也触发
    // mouseleave 进入子元素的时候不触发

    /* hover是由mouseenter和mouseleave组成的  */
    $('div').hover(function () {
        console.log('鼠标进去了')
    }, function () {
        console.log('鼠标出来了')
    })
</script>