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

Question

不确定我的标题是否准确。由于某些原因，我需要为 class 应用不同的 id，因为当我悬停它时它只检测到 id 而不是 class。所以我做了一个 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 而不是 class" 你可以提高 class 的特异性通过添加标签名称选择器：

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

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

Answer 3

你可以使用hover()绑定一个或两个方法，第一个用于鼠标进入时，另一个用于鼠标离开时，find()找到[=16=中的元素].

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

请参阅下面的工作片段：

$('.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。

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

jQuery simplified multiple div mouseover function

javascript

jquery

css

hover

mouseover