JS-鼠标光标指针悬停事件

时间:2024-02-19 17:57:30
鼠标指针悬停事件:
       $("#month_select").mouseenter(function(){
              alert("go in!");
       });
       
       $("#month_select").mouseleave(function(){
              alert("go out!");
       });
       
       $("#month_select").hover(function(){
              alert("if");
              },function(){
              alert("else");
       });
说明: A1和A2效果相似,但是A2择优!
原因: 此样例由于是写在ul标签,经测试发现A1会多次冗余触发。所有选择A2!或有未清楚的地方)
A1:
    // 当鼠标从元素上移开时事件!
    $("#selected").mouseout(function(){
       $("#selected").removeClass("border");
       $("#selected").css("border","1px solid #AAAAAA");
    });
         
    // 当鼠标指针位于元素上方时事件!
    $("#selected").mouseover(function(){
       $("#selected").removeClass("border");
       $("#selected").css("border","1px solid #707070");
    });

A2:
    // 当鼠标指针进入(穿过)元素时事件!
    $("#selected").mouseenter(function(){
       $("#selected").removeClass("border");
       $("#selected").css("border","1px solid #707070");
    });

    // 当鼠标指针离开元素时事件!
    $("#selected").mouseleave(function(){
       $("#selected").removeClass("border");
       $("#selected").css("border","1px solid #AAAAAA");
    });