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

Answer 2

另一种解决方案是适合所有以“artibox-”开头的Id 的选择器

[id^="artibox-"]:hover .artibox-hover {
  opacity: 1;
}

此外，就 " ...当我将其悬停时它只检测 id 而不是类" 您可以通过添加标签名称来提高类选择器的特异性：

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

这个技巧应该会影响目标元素。

Answer 3

您可以使用hover()，它绑定一个或两个方法，第一个用于鼠标进入时，另一个用于鼠标离开时，find() 用于查找.artibox 中的元素。

$('.artibox').hover(function() {
  $(this).find('.artibox-hover').css('opacity', '1');
}, function() {
  $(this).find('.artibox-hover').css('opacity', '0');
});

查看下面的工作 sn-p：

$('.artibox').hover(function() {
  $(this).find('.artibox-hover').css('opacity', '1');
}, function() {
  $(this).find('.artibox-hover').css('opacity', '0');
});

.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;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>

您可以阅读有关hover() 方法的更多信息here。

Answer 4

你可以试试下面的代码：

$(document).on('mouseover', '.artibox[id^="artibox-"]', function () {
  $(this).find('.artibox-hover').css('opacity', '1');
});

$(document).on('mouseout', '.artibox[id^="artibox-"]', function () {
  $(this).find('.artibox-hover').css('opacity', '0');
});

你将不需要 ":hover" css。