javascript - onMouseover 和 onMouseout 函数仅适用于我的无序列表中的一个列表项

Question

我有一个包含 10 多个列表项的无序列表，我需要向其添加鼠标事件。 onMouseover 和 onMouseout 仅适用于第一个列表项，但不适用于所有其他列表项。我需要鼠标事件来处理所有列表

    const showSlideElement = (myID) => {
        document.querySelector(myID).style.display = 'block';
        document.querySelector('.services-box').style.height  = '110px';
    }

    const hideElement = (myID) => {
        document.querySelector(myID).style.display = 'none';
        document.querySelector('.services-box').style.height  = '26px';
    }

.slideList {
  width: 100%;
}

.slideList li {
  position: relative;
}

.slideList .service-highlight {
  background-color: #0088ff;
  position: absolute;
  color: white;
  bottom: 0;
  left: 0;
  right: 0;
}

.slideList .service-highlight p {
  display: inline-block;
  color: white;
  font-size: 18px;
  font-weight: bold;
}

.slideList .service-highlight .services-box {
  text-align: center;
  background-color: #003768;
  width: 270px;
  font-weight: bold;
  float: left;
}

.slideList .service-highlight .services-detail {
  width: calc(100% - 270px);
  float: left;
  padding-left: 5px;
}

.slideList .hide-description {
  display: none;
  font-weight: normal;
}

.slideList .hide-description p {
  font-weight: normal;
  padding-top: 10px 5px 10px;
}

<ul class="slideList">
  <li data-transition="fade">
    <img src="https://cdn.pixabay.com/photo/2015/12/01/20/28/road-1072823_960_720.jpg" alt="" width="1920" height="630">

    <div class="service-highlight" onMouseover='showSlideElement(`.hide-description`)' onMouseout='hideElement(`.hide-description`)'>
      <p class="services-box">SOME SERVICES:</p>
      <div class="services-detail">
        <p>The service headline</p>
        <div class="hide-description">
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</p>
        </div>
      </div>
    </div>
  </li>

  <li data-transition="fade">
    <img src="https://cdn.pixabay.com/photo/2018/01/12/10/19/fantasy-3077928_960_720.jpg" alt="" width="1920" height="630">

    <div class="service-highlight" onMouseover='showSlideElement(`.hide-description`)' onMouseout='hideElement(`.hide-description`)'>
      <p class="services-box">SOME SERVICES:</p>
      <div class="services-detail">
        <p>The service headline</p>
        <div class="hide-description">
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</p>
        </div>
      </div>
    </div>
  </li>
</ul>

Answer 1

这一切都可以使用简单的 CSS 实现:

.hide-description {
  display: none;
}

.services-box {
  height: 26px;
  background: #0bf;
  transition: 0.4s;
}

.service-highlight:hover .hide-description {
  display: block;
}

.service-highlight:hover .services-box {
  height: 110px;
}

<div class="service-highlight">
  <p class="services-box">SOME SERVICES:</p>
  <div class="services-detail">
    <p>The service headline</p>
    <div class="hide-description">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</p>
    </div>
  </div>
</div>