How to add mouseover event to each li in jquery?

jqueryYou can select a collection of tags through a selector. Then point to the current object through $(this).
$("#ul li") This can get all the li under id. When the mouse passes over a certain li, $(this) is used to indicate that the current li object is operating.
Adding mouseover to each li can be understood as each li triggering the mouseover event.
For example:

<ul id="ul">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<script type="text/javascript">
$("#ul li").mouseover(function(){//jquery的mouseover事件
alert($(this).index());//弹出每个li的的位置
//这样就能实现每个li都绑定mouseover事件
});
</script>

This should be a simple sliding door effect.

The structure of HTML is probably like yours, with a list on the left and a div group on the right.

In fact, you only need to understand that the list on the left and the div group on the right both have index values. Then just control it through a variable, so that this variable can be used for the list on the left and the button on the right.

var int = 0; //初始化一个变量
  
//定义一个函数，用来隐藏显示右侧的div和控制左侧的列表
function divShow(int){
    $('#right .item').hide().eq(int).show();
    $('#left li').removeClass('current').eq(int).addClass('current');
}

We need to add events to the list on the left;

$('#left li').bind({
    'mouseover' : function(){
        //获取当前元素的索引值
        int = $(this).index();
          
        //执行函数,这里会显示右侧的第一个div元素
        divShow(int);
    },
    'mouseout' : function(){
        //鼠标划开时的操作
        //int = 0;
        //divShow(int);
    }
});

The same goes for the buttons on the side

//上翻
$('#prev').bind({
    'click' : function(){
        //这里要使用判断
        if(int <= 0){
            //这里的个数可以拿到外面定义；
            int = ($(&#39;#right .item&#39;).length-1);
        }else{
            int = (int-1);
        };
        int = int;
    }
});
  
//下翻
$(&#39;#next&#39;).bind({
    &#39;click&#39; : function(){
        //这里要使用判断
        if(int >= ($(&#39;#right .item&#39;).length-1)){
            //这里的个数可以拿到外面定义；
            int = 0;
        }else{
            int = (int+1);
        };
        int = int;
    }
});

If you plan to initialize when the mouse leaves, then you Just set the int index variable to 0 in the mouseout event of each button.

The above is the detailed content of How to add mouseover event to each li in jquery?. For more information, please follow other related articles on the PHP Chinese website!