Javascript 如何在鼠标悬停时获取选定索引？

你能告诉我如何在鼠标悬停时获取所选项目索引吗..我有一个列表，当我鼠标悬停在列表上时，我添加了悬停类。但是我需要所选项目

这是我的密码

---

当我悬停在B上时，它给我

1

，当我悬停在

c

上时，它给我

2

你可以将

mouseenter

和

mouseleave

事件绑定到列表项。这样，

$（this）

将包含您需要的信息，通过jQuery功能，您可以获得其索引：

$（函数（）{
$（#主菜单li'）。打开({
mouseenter:function（）{
log（“鼠标悬停：+$（this.index（））
},
mouseleave:function（）{
log（“鼠标离开：+$（this.index（））
}
});
})

#主菜单ul li:悬停{
背景颜色：红色
}

A.


B


C

您可以将

mouseenter

和

mouseleave

事件绑定到列表项。这样，

$（this）

将包含您需要的信息，通过jQuery功能，您可以获得其索引：

$（函数（）{
$（#主菜单li'）。打开({
mouseenter:function（）{
log（“鼠标悬停：+$（this.index（））
},
mouseleave:function（）{
log（“鼠标离开：+$（this.index（））
}
});
})

#主菜单ul li:悬停{
背景颜色：红色
}

A.


B


C

使用选择器并将其移动到

$('#main-menu li').on({
    mouseenter: function() {
      console.log("over index " + $(this).index())
    },
    mouseleave: function() {
      console.log("leave index " + $(this).index())
    }
});

使用选择器并将其移动到

$('#main-menu li').on({
    mouseenter: function() {
      console.log("over index " + $(this).index())
    },
    mouseleave: function() {
      console.log("leave index " + $(this).index())
    }
});

试试这个JS；）

$（函数（）{
$（#主菜单li'）。在（{
鼠标指针：函数（）{
警报（$（this.index（））；
}，
})；
})试试这个JS；）

$（函数（）{
$（#主菜单li'）。在（{
鼠标指针：函数（）{
警报（$（this.index（））；
}，
})；
})

使用CSS属性no JS，请查看演示

片段

li{
字体：400 16px/1.5“控制台”；
文字装饰：无；
列表样式：无；
光标：指针；
文本对齐：居中；
填充：0 1ex；
利润率：0.2ex；
}
李：以前{
不透明度：0；
}
李：悬停：之前{
内容：idx；
不透明度：1；
背景色：黑色；
颜色：黄色；
填充：0 1ex；
文本对齐：左对齐；
利润率：0.2ex 0；
}
李：悬停{
背景：黄色；
颜色：黑色；
}
保险商实验室{
计数器复位：idx-1；
}
李：以前{
计数器增量：idx；
内容：计数器（idx）；
}

A.


B


C


D


E


F


G


H


我

使用CSS属性no JS，请查看演示

片段

li{
字体：400 16px/1.5“控制台”；
文字装饰：无；
列表样式：无；
光标：指针；
文本对齐：居中；
填充：0 1ex；
利润率：0.2ex；
}
李：以前{
不透明度：0；
}
李：悬停：之前{
内容：idx；
不透明度：1；
背景色：黑色；
颜色：黄色；
填充：0 1ex；
文本对齐：左对齐；
利润率：0.2ex 0；
}
李：悬停{
背景：黄色；
颜色：黑色；
}
保险商实验室{
计数器复位：idx-1；
}
李：以前{
计数器增量：idx；
内容：计数器（idx）；
}

A.


B


C


D


E


F


G


H


我

为什么不将事件处理程序附加到列表项而不是div容器？您到底想做什么？在事件处理程序中，此是发生事件的元素。您可能需要有关儿童的事件我希望如果我将鼠标悬停到第二项它给我1..或者我将鼠标悬停到第三项它给我2使用鼠标悬停我想获取项的索引..我想您正在搜索

$（此）

指针。

的索引将始终为零，因为是

中唯一的子项。要获取索引，您需要阅读

项索引，而不是

，但是，如果您需要指向该元素以使用

$（this）

，那么为什么不将事件处理程序附加到列表项而不是div容器？您到底想做什么？在事件处理程序中，此是发生事件的元素。您可能需要有关儿童的事件我希望如果我将鼠标悬停到第二项它给我1..或者我将鼠标悬停到第三项它给我2使用鼠标悬停我想获取项的索引..我想您正在搜索

$（此）

指针。

的索引将始终为零，因为是

中唯一的子项。要获取索引，您需要阅读

项索引，而不是

，但是，如果您需要指向该元素以使用

$（this）

我希望获取索引而不是文本，则更好