Javascript 如何循环使用具有相同类的li标记列表并更改其相应的样式

我有一个具有相同类的li标签列表，我想更改 它们的样式及其子元素在用户悬停时的样式 在每个li（容器）上，下面是我的代码 尝试我使用getElementsByClassName获取所有li的节点列表 标记，现在，我想做的是将事件侦听器添加到每个标记中 并在用户触发鼠标悬停时操纵每一项的样式 事件

函数doFirst（）{
var playList=document.getElementsByClassName（“列表”）；
var play=document.getElementsByClassName（“play”）；
var plus=document.getElementsByClassName（“plus”）；
var title=document.getElementsByClassName（“title”）；
悬停功能（e）{
播放列表[0]。style.backgroundColor=“#ccc”；
播放[0]。style.display=“block”；
加上[0]。style.display=“block”；
标题[0]。style.width=“50%”；
}
功能输出（e）{
播放列表[0]。style.backgroundColor=“#fff”；
播放[0]。style.display=“无”；
加上[0]。style.display=“无”；
标题[0]。style.width=“自动”；
}
播放列表[0]。addEventListener（“鼠标悬停”，歌曲悬停，错误）；
播放列表[0]。addEventListener（“mouseleave”，songHoverOut，false）；
}
window.addEventListener（“加载”，doFirst，false）
content.song列表{
宽度：100%；
高度：自动；
}
歌曲列表{
利润底部：4%；
显示器：flex；
弯曲方向：立柱；
}
歌曲列表ul>p{
宽度：100%；
填充：6%01%0；
字体大小：140%；
颜色：#2b32b2；
}
内容。歌曲列表{
宽度：100%；
显示器：flex；
对齐项目：居中；
调整内容：灵活启动；
身高：10%；
利润底部：6%；
填充：2%；
}
.头衔{
边框：0px实心红色；
弹性：1；
最大宽度：80%；
显示器：flex；
柔性包装：包装；
调整内容：灵活启动；
}
.标题h4{
字体大小：正常！重要；
字体大小：98%；
空白：nowrap；
溢出：隐藏；
利润底部：4倍；
宽度：100%；
}
.标题p{
字号：85%；
空白：nowrap；
溢出：隐藏；
右边距：8px；
}
.标题p：第一个孩子{
弹性：1；
}
.标题p：最后一个孩子{
最大宽度：50%；
}
内容。歌曲列表ulli i{
显示：无；
边框：0px实心红色；
宽度：15%；
文本对齐：居中；
填充：3.8%0；
}
.玩{
}
.另外{
}
.持续时间{
显示：块；
边框：0px实心红色；
左边距：自动；
宽度：20%；
文本对齐：右对齐；
填充：3.8%0；
}


A


满天繁星
酷玩

鬼故事

>
+
4:28


A队（乔治。ortha@ferialaw.com)
埃德·希兰

+

>
+
4:18


崇拜你
麦莉·塞勒斯

班格尔茨

>
+
4:38


装饰（乔治）。ortha@ferialaw.com)
米格尔

万花筒梦

>
+
3:13


阿盖恩
胎圈

公告牌热门100单曲排行榜

>
+
5:12



B


回到十二月（乔治。ortha@ferialaw.com)
裁缝斯威夫特

2011年广告牌图表

>
+
4:43


坏（乔治。ortha@ferialaw.com)
横幅

天才

>
+
4:14


仇怨
裁缝斯威夫特

2011年广告牌图表

>
+
5:12


酒保
战前夫人

747

>
+
5:12


相信我
利尔·韦恩

相信我

>
+
5:12


我认为更简单的解决方案是css
：hover
伪类（当用户用光标悬停元素时更改样式）

示例：
.parent:hover.some child{hover styles}
您似乎对“addEventListener”有点困惑。您不必向窗口添加事件侦听器来初始化代码。只需将其包装在
（function（）{//Your code}）（）中即可并将尽快执行

但在这里，您有一个关于如何进行的问题：

不过，我使用了“querySelectorAll”而不是“getElementsByClassName”。但我希望我的解决方案对您有意义。：）


（函数（）{
var lielem=document.queryselectoral（“.li”），i；
对于（i=0；i

第一个li
第二个li
第三个li
我发现一些信息