Question

不确定我的标题是否准确。由于某些原因，我需要为类应用不同的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而不是类你可以通过添加标签名来提高类选择器的特异性：

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

请参阅下面的工作代码：

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

您可以详细了解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');
});

你不会需要＆＃34;：hover＆＃34; css用这个。

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

4 个答案: