javascript - jQuery 简化了多个 div 鼠标悬停功能

Question

不确定我的标题是否准确。由于某些原因，我需要为类应用不同的 id，因为当我悬停它时它只检测 id 而不是类。所以我做了一个 css 版本，当我的鼠标悬停在 div 上时，特定 div 的不透明度将变为 1。

<ul class="list-unstyled">
  <li>
    <div class="artibox" id="artibox-01">
      <div class="artibox-hover artibox-1"></div>
      <div class="artibox-container container">
        <div class="artibox-title">
          <p class="artibox-date">Category</p>
          <h4>Title 1</h4>
        </div>
        <div class="artibox-intro">
          <p class="artibox-excerpt">Content here.</p>
          <a class="btn-primary"" href="#">Read More</a>
        </div>
      </div>
    </div>
  </li>
  <li>
    <div class="artibox" id="artibox-02">
      <div class="artibox-hover artibox-2"></div>
      <div class="artibox-container container">
        <div class="artibox-title">
          <p class="artibox-date">Category</p>
          <h4>Title 2</h4>
        </div>
        <div class="artibox-intro">
          <p class="artibox-excerpt">Content here.</p>
          <a class="btn-primary"" href="#">Read More</a>
        </div>
      </div>
    </div>
  </li>
  <li>
    <div class="artibox" id="artibox-03">
      <div class="artibox-hover artibox-3"></div>
      <div class="artibox-container container">
        <div class="artibox-title">
          <p class="artibox-date">Category</p>
          <h4>Title 3</h4>
        </div>
        <div class="artibox-intro">
          <p class="artibox-excerpt">Content here</p>
          <a class="btn-primary"" href="#">Read More</a>
        </div>
      </div>
    </div>
  </li>
  <li>
    <div class="artibox" id="artibox-04">
      <div class="artibox-hover artibox-4"></div>
      <div class="artibox-container container">
        <div class="artibox-title">
          <p class="artibox-date">Category</p>
          <h4>Title 4</h4>
        </div>
        <div class="artibox-intro">
          <p class="artibox-excerpt">Content here.</p>
          <a class="btn-primary" href="#">Read More</a>
        </div>
      </div>
    </div>
  </li>
</ul>

CSS:

.artibox {
  height: auto;
  width: 100%;
  display: block;
  border-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: #000;
  background-color: #888;
  background-image: none;
  color:#fff;
}

.artibox-hover {
  opacity: 0;
  position: absolute;
  z-index: 0;
  display: block;
  overflow: visible;
  width: 100%;
  height: 200px;
  transition: all 0.5s ease;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
}

.artibox-container {
  height: 200px;
}

.artibox-title {
  position: relative;
  width: 50%;
  height: 200px;
  padding-top: 40px;
  float: left;
  padding-right: 100px;
}

.artibox-intro {
  position: relative;
  z-index: 2;
  width: 50%;
  height: 200px;
  padding-top: 60px;
  float: right;
}

.artibox-1 {
  background-image: url(http://cdn.koreaboo.com/wp-content/uploads/2016/02/mamamoo-melting-4.jpg);
  background-position: 0 0;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.artibox-2 {
  background-image: url(http://www.asianjunkie.com/wp-content/uploads/2016/09/MAMAMOONewYork.jpg);
  background-position: 20% 20%;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.artibox-3 {
  background-image: url(http://i.imgur.com/F0V2Ctk.jpg);
  background-position: 20% 10%;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.artibox-3 {
  background-image: url(http://www.allkpop.com/upload/2016/11/af_org/mamamoo_1478711828_af_org.jpg);
  background-position: 0 0;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.artibox-4 {
  background-image: url(http://img11.deviantart.net/4dd5/i/2016/075/4/3/mamamoo_png_by_euphoriclover-d9vbula.png);
  background-position: 0 10%;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}


#artibox-01:hover .artibox-hover {
  opacity: 1;
}
#artibox-02:hover .artibox-hover {
  opacity: 1;
}
#artibox-03:hover .artibox-hover {
  opacity: 1;
}
#artibox-04:hover .artibox-hover {
  opacity: 1;
}

我的工作文件:http://codepen.io/rae0724/pen/RKrBgw

如果每次更新我的文件我都需要添加如下悬停css，那就太麻烦了:

#artibox-01:hover .artibox-hover {
  opacity: 1;
}

有什么方法可以将 jquery 写成一个函数，这样我就不需要一直重复代码了吗？谢谢。因为我jquery很烂。 :(

Answer 1

您可以使用纯 CSS 规则作为

.artibox:hover .artibox-hover {
  opacity: 1;
}

代替

#artibox-01:hover .artibox-hover {
   opacity: 1;
}

Updated Pen