Question

以下代码有效，但我有一个问题，因为我想拥有多个像这样的组合对象。如果我使用当前代码，它将使用文本而不是一次基于悬停的所有隐藏div（.slide）。我无法使用＆＃34;这个＆＃34;因为那只会使图片向上生动。我可以提供所有ID，并编写大量重复的JavaScript代码，但我几乎是积极的，这不是最好的做事方式。

基本上，你如何使用悬停效果来定位div，这会导致另一个div做某事但仍能重用代码？

此部分的HTML：

<div class="col-md-6 high">
    <img class="port" src="http://loremflickr.com/320/240" alt="test">
    <div class="slide">
        <h3>Test Portfolio</h3>
    </div>
</div>

本节的CSS：

.high {
  height: 200px;
  overflow: hidden;
}

.port {
  width: 100%;
  height: 200px;
}

.slide {
  background-color: rgba(74, 170, 165, 0.7);
  color: white;
  position: relative;
  top: -34px;
  height: 200px;
  width: 100%;
  padding: 20px;
  text-align: center;
}

本节的JavaScript：

$(document).ready(function(){

  var portfolio = {
    // moves div with text over portfolio picture on hover
    hoverPort: function() {
      $(".port").hover(function() {
        $(".slide").stop().animate({"top" : "-110px"});
      }, function() {
        $(".slide").stop().animate({"top" : "-34"});
      });
    }, // end of hoverPort function
  } // end of portfolio object

  portfolio.hoverPort();

}); // end of document.ready

Answer 1

当然你可以使用this，不是为元素本身设置动画，而是引用另一个＆＃34;最近的＆＃34;基于此的元素：

    $(".port").hover(function() {
        $(this).next('.slide').stop().animate({"top" : "-110px"});
    }, function() {
        $(this).next('.slide').stop().animate({"top" : "-34"});
    });

演示代码段

＆＃13;

 $(".port").hover(function() {
   $(this).next('.slide').stop().animate({
     "top": "-110px"
   });
 }, function() {
   $(this).next('.slide').stop().animate({
     "top": "-34"
   });
 });

＆＃13;

.col-md-6 {
  float: left;
  width: 50%;
  padding:25px;
  box-sizing:border-box;
}
.slide {
  position: relative;
  top: -60px;
  color: white;
  background: red;
  font-size: 2em;
  font-family: sans-serif;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-6 high">
  <img class="port" src="http://loremflickr.com/320/240" alt="test">
  <div class="slide">
    <h3>Test Portfolio</h3>
  </div>
</div>
<div class="col-md-6 high">
  <img class="port" src="http://loremflickr.com/320/240" alt="test">
  <div class="slide">
    <h3>Test Portfolio</h3>
  </div>
</div>

＆＃13;

Answer 2

你可以使用jQuery＆＃34; eq＆＃34;选择。

    $(".port").eq(0).hover(function() {
        $(".slide").eq(0).stop().animate({"top" : "-110px"});
    });

将鼠标悬停在第一个＆＃34;端口＆＃34;将动画第一个＆＃34;幻灯片＆＃34;。

动画多个Div

2 个答案: