Javascript jQuery简化的多div mouseover函数

我不确定我的标题是否准确。出于某些原因，我需要为类应用不同的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-01:hover .artibox-hover {
  opacity: 1;
}

---

有没有什么方法可以将jquery作为函数编写，这样就不必重复代码了？非常感谢。因为我在jquery方面很差（

您可以使用纯CSS规则作为

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

而不是

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

---

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

Id

此外，就“…当我将其悬停时，它只检测id而不检测类”而言，您可以通过添加标记名来提高类选择器的特定性：

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

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

您可以使用

hover（）

绑定一个或两个方法，首先用于鼠标进入时，另一个用于鼠标离开时，然后使用

find（）

在

.artibox

中查找元素

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

请参见下面的工作代码段：

$（'.artibox'）。悬停（函数（）{
$（this.find（'.artibox hover'）.css（'opacity'，'1'）；
}，函数（）{
$（this.find（'.artibox hover'）.css（'opacity'，'0'）；
})；

.artibox{
高度：自动；
宽度：100%；
显示：块；
边框宽度：1px；
边框底部样式：实心；
边框底色：#000；
背景色：#888；
背景图像：无；
颜色：#fff；
}
.artibox悬停{
不透明度：0；
位置：绝对位置；
z指数：0；
显示：块；
溢出：可见；
宽度：100%；
高度：200px；
过渡：所有0.5s缓解；
-webkit过渡：所有0.5s轻松；
-moz过渡：所有0.5s轻松；
-ms过渡：所有0.5s轻松；
-o型过渡：所有0.5s的轻松度；
}
.纸箱{
高度：200px；
}
.艺术盒标题{
位置：相对位置；
宽度：50%；
高度：200px；
填充顶部：40px；
浮动：左；
右边填充：100px；
}
.artibox简介{
位置：相对位置；
z指数：2；
宽度：50%；
高度：200px；
填充顶部：60px；
浮动：对；
}
A.框-1{
背景图片：url(http://cdn.koreaboo.com/wp-content/uploads/2016/02/mamamoo-melting-4.jpg);
背景位置：0；
-webkit背景尺寸：封面；
-moz背景尺寸：封面；
-o-背景尺寸：封面；
背景尺寸：封面；
}
A.框-2{
背景图片：url(http://www.asianjunkie.com/wp-content/uploads/2016/09/MAMAMOONewYork.jpg);
背景位置：20%20%；
-webkit背景尺寸：封面；
-moz背景尺寸：封面；
-o-背景尺寸：封面；
背景尺寸：封面；
}
A.框-3{
背景图片：url(http://i.imgur.com/F0V2Ctk.jpg);
背景位置：20%10%；
-webkit背景尺寸：封面；
-moz背景尺寸：封面；
-o-背景尺寸：封面；
背景尺寸：封面；
}
A.框-3{
背景图片：url(http://www.allkpop.com/upload/2016/11/af_org/mamamoo_1478711828_af_org.jpg);
背景位置：0；
-webkit背景尺寸：封面；
-moz背景尺寸：封面；
-o-背景尺寸：封面；
背景尺寸：封面；
}
A.方框-4{
背景图片：url(http://img11.deviantart.net/4dd5/i/2016/075/4/3/mamamoo_png_by_euphoriclover-d9vbula.png);
背景位置：0.10%；
-webkit背景尺寸：封面；
-moz背景尺寸：封面；
-o-背景尺寸：封面；
背景尺寸：封面；
}

类别

标题1
这里的内容



类别

标题2
这里的内容



类别

标题3
此处的内容


类别

标题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来处理此问题

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

$(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');
});