多个相同class的标签的鼠标移入移出事件

2024-07-13 23:47| 来源: 网络整理| 查看: 265

为多个具有相同class名字的标签绑定鼠标移入移出事件

案例：为多个class名字为aa的div绑定鼠标移入移出事件

要求：当鼠标移入到当前div时，当前div内的字体变成红色，移出时字体变成蓝色

实现步骤：

1.获取class为aa的所有div标签（改变div属性用）

var str = document.getElementsByClassName("aa");

2.根据类名利用each()方法为每一个标签绑定事件

①：移入事件

$(".aa").each(function(index){ //移入事件 $(this).mouseenter(function(obj) { //根据下标改变字体的颜色(红色) str[index].css("color", "red"); }); });

②：移出事件

$(".aa").each(function(index){ //移出 $(this).mouseleave(function(obj) { //根据下标改变字体的颜色(蓝色) str[index].css("color", "blue"); }); }); 补充：在有多个div的情况下，根据下标对div进行显示和隐藏操作 /* mdiv：div的class名称 index:下标 */ $(".mdiv:eq("+index+")").show(); $(".mdiv:eq("+index+")").hide();

【本文地址】

公司简介

联系我们