I have a list of li tags having same class and and i want to change their styles and their children elements styles when ever a user hover over each the li which is the container, below is the code I have tried. I used getElementsByClassName to get the node list of all li tags, now, what I want to do is add event listener to each one of them and manipulate the style of each when ever a user triggers a mouseover event
function doFirst(){
var playList = document.getElementsByClassName("list");
var play = document.getElementsByClassName("play");
var plus = document.getElementsByClassName("plus");
var title = document.getElementsByClassName("title");
function songHover (e){
playList[0].style.backgroundColor = "#ccc";
play[0].style.display = "block";
plus[0].style.display = "block";
title[0].style.width = "50%";
}
function songHoverOut (e){
playList[0].style.backgroundColor = "#fff";
play[0].style.display = "none";
plus[0].style.display = "none";
title[0].style.width = "auto";
}
playList[0].addEventListener("mouseover", songHover, false);
playList[0].addEventListener("mouseleave", songHoverOut, false);
}
window.addEventListener("load", doFirst, false);
content .song-list{
width: 100%;
height: auto;
}
content .song-list ul{
margin-bottom:4%;
display: flex;
flex-direction: column;
}
content .song-list ul > p{
width: 100%;
padding: 6% 0 1% 0;
font-size: 140%;
color: #2b32b2;
}
content .song-list ul li{
width: 100%;
display: flex;
align-items: center;
justify-content: flex-start;
height: 10%;
margin-bottom: 6%;
padding: 2%;
}
.title{
border: 0px solid red;
flex:1;
max-width: 80%;
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
}
.title h4{
font-weight: normal!important;
font-size: 98%;
white-space: nowrap;
overflow: hidden;
margin-bottom: 4px;
width: 100%;
}
.title p{
font-size: 85%;
white-space: nowrap;
overflow: hidden;
margin-right: 8px;
}
.title p:first-child{
flex:1;
}
.title p:last-child{
max-width: 50%;
}
content .song-list ul li i{
display: none;
border: 0px solid red;
width: 15%;
text-align: center;
padding: 3.8% 0;
}
.play{
}
.plus{
}
.duration{
display: block;
border: 0px solid red;
margin-left: auto;
width: 20%;
text-align: right;
padding: 3.8% 0;
}
<div class="song-list">
<ul>
<p>A</p>
<li class="list">
<span class="title">
<h4>A Sky Full Of Stars</h4>
<p>Coldplay</p>
<p>Ghost Stories</p>
</span>
<i class="play">></i>
<i class="plus">+</i>
<span class="duration">4:28</span>
</li>
<li class="list">
<span class="title">
<h4>The A Team (george.ortha@ferialaw.com)</h4>
<p>Ed Sheeran</p>
<p>+</p>
</span>
<i class="play">></i>
<i class="plus">+</i>
<span class="duration">4:18</span>
</li>
<li class="list">
<span class="title">
<h4>Adore You</h4>
<p>miley Cyrus</p>
<p>bangerz</p>
</span>
<i class="play">></i>
<i class="plus">+</i>
<span class="duration">4:38</span>
</li>
<li class="list">
<span class="title">
<h4>Adorn (george.ortha@ferialaw.com)</h4>
<p>Miguel</p>
<p>Kaleidoscope Dream</p>
</span>
<i class="play">></i>
<i class="plus">+</i>
<span class="duration">3:13</span>
</li>
<li class="list">
<span class="title">
<h4>Again</h4>
<p>Fetty Wrap</p>
<p>Billboard Hot 100 Singles Chart</p>
</span>
<i class="play">></i>
<i class="plus">+</i>
<span class="duration">5:12</span>
</li>
</ul>
<ul>
<p>B</p>
<li class="list">
<span class="title">
<h4>
Back to December (george.ortha@ferialaw.com)
</h4>
<p>Tailor Swift</p>
<p>2011 Billboard Chart</p>
</span>
<i class="play">></i>
<i class="plus">+</i>
<span class="duration">4:43</span>
</li>
<li class="list">
<span class="title">
<h4>Bad (george.ortha@ferialaw.com)</h4>
<p>Wale</p>
<p>The Gifted</p>
</span>
<i class="play">></i>
<i class="plus">+</i>
<span class="duration">4:14</span>
</li>
<li class="list">
<span class="title">
<h4>Bad Blood</h4>
<p>Tailor Swift</p>
<p>2011 Billboard Chart</p>
</span>
<i class="play">></i>
<i class="plus">+</i>
<span class="duration">5:12</span>
</li>
<li class="list">
<span class="title">
<h4>Bartender</h4>
<p>Lady Antebellum</p>
<p>747</p>
</span>
<i class="play">></i>
<i class="plus">+</i>
<span class="duration">5:12</span>
</li>
<li class="list">
<span class="title">
<h4>Believe Me</h4>
<p>Lil Wayne</p>
<p>Believe Me</p>
</span>
<i class="play">></i>
<i class="plus">+</i>
<span class="duration">5:12</span>
</li>
</ul>
</div>
最佳答案
我认为更简单的解决方案是 css :hover
伪类(当用户将光标悬停在元素上时更改样式)。
示例:.parent:hover .some-child {hover styles}
。
关于javascript - 如何遍历具有相同类的 li 标签列表并更改其相应的样式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48652124/