如何遍历具有相同类的li标签列表并更改其相应的样式

时间：2018-02-06 21:19:09

标签： javascript html css

  

我有一个具有相同类别的li标签列表，我想改变   用户悬停时的样式和子元素样式   在每个作为容器的li上，下面是我的代码   试过。我使用getElementsByClassName来获取所有li的节点列表   标签，现在，我想要做的是为每一个添加事件监听器   并在用户触发鼠标悬停时操纵每个样式   事件

＆＃13;
＆＃13; 
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);
＆＃13; 
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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

2 个答案:

答案 0 :(得分：1)

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

示例：.parent:hover .some-child {hover styles}。

答案 1 :(得分：0)

你似乎对“addEventListener”有点困惑。您不必向窗口添加事件侦听器来初始化代码。只需将其包裹在(function(){ // Your code })();中，它就会尽快执行。

但是在这里你有一个关于如何去做的jsfiddle：https://jsfiddle.net/g59x59rr/12/

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

(function() {
  var lielem = document.querySelectorAll(".li"), i;
  for (i = 0; i < lielem.length; i++) {
    	lielem[i].addEventListener('mouseover', function() {
      this.style.color = 'red';
      this.addEventListener('mouseout', function(){
      	this.style.color = 'black';
      });
    });
  }
})();
<ul>
  <li class="li">First Li</li>
  <li class="li">Second Li</li>
  <li class="li">Third Li</li>
</ul>

相关问题
最新问题