多个框上的Jquery悬停事件

Question

＆＃13;

＆＃13;

$('.outerBox').hover(
  function() {
    $(this) > $('.innerBox').stop();
    $(this) > $('.innerBox').slideDown(750);
  },
  function() {
    $(this) > $('.innerBox').stop();
    $(this) > $('.innerBox').slideUp(750);
  }
);

＆＃13;

.outerBox {
  width: 350px;
  height: 350px;
  float: left;
  margin: 10px 10px;
  background-color: orange;
  position: relative;
}
.innerBox {
  position: absolute;
  width: 250px;
  height: 300px;
  bottom: 0px;
  margin: 0 50px;
  background-color: blue;
  display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="outerBox" id="outer1">
  <div class="innerBox" id="inner1"></div>
</div>
<div class="outerBox" id="outer2">
  <div class="innerBox" id="inner2"></div>
</div>

＆＃13;

＆＃13;

＆＃13;

当我使用id #outerBox和#innerBox运行它时，页面上只有一个框，它运行得很好。 但我需要这是通用的，因为我有多个盒子在hepage上需要运行相同的代码。

当我使用它时，我将鼠标悬停在任何一个方框上，幻灯片就会发生在所有方框上。

我该如何解决？ 感谢

Answer 1

使用Jquery find代替其他选择器。

这是因为您想“找到”$(this)

的孩子的值

我还会使用jquery（使用DRY technique）的强大功能来确保您将其用于最大潜力。

您最终的脚本类似于：

 $('.outerBox').hover(
      function() {
        $(this).find('.innerBox').stop().slideDown(750);
      },
      function() {
        $(this).find('.innerBox').stop().slideUp(750);
      }
    );

---

进一步重构后，您可以进行重构：

$('.outerBox').hover(function () {
    $(this).find('.innerBox').stop().slideToggle(750);
});

注意缩短的jquery？

---

$('.outerBox').hover(
  function() {
    $(this).find('.innerBox').stop().slideDown(750);
  },
  function() {
    $(this).find('.innerBox').stop().slideUp(750);
  }
);

.outerBox {
  width: 350px;
  height: 350px;
  float: left;
  margin: 100px 100px;
  background-color: orange;
  position: relative;
}
.innerBox {
  position: absolute;
  width: 250px;
  height: 300px;
  bottom: 0px;
  margin: 0 50px;
  background-color: blue;
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="outerBox" id="outer1">
  <div class="innerBox" id="inner1"></div>
</div>
<div class="outerBox" id="outer2">
  <div class="innerBox" id="inner2"></div>
</div>

Answer 2

使用find() ...你也可以稍微缩短你的功能：

$('.outerBox').hover(function () {
    $(this).find('.innerBox').stop().slideToggle(750);
});

 $('.outerBox').hover(function () {
     $(this).find('.innerBox').stop().slideToggle(750);
 });

 .outerBox {
     width: 350px;
     height: 350px;
     float: left;
     margin: 100px 100px;
     background-color: orange;
     position: relative;
 }
 .innerBox {
     position: absolute;
     width: 250px;
     height: 300px;
     bottom: 0px;
     margin: 0 50px;
     background-color: blue;
     display: none;
 }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="outerBox" id="outer1">
    <div class="innerBox" id="inner1"></div>
</div>
<div class="outerBox" id="outer2">
    <div class="innerBox" id="inner2"></div>
</div>

Answer 3

您还可以尝试使用mouseenter和mouseleave

$('.outerBox').on({
  mouseenter: function() {
    $(this).find('.innerBox').stop();
    $(this).find('.innerBox').slideDown(750);
  },
  mouseleave: function() {
    $(this).find('.innerBox').stop();
    $(this).find('.innerBox').slideUp(750);
  }
});

    .outerBox {
      width: 350px;
      height: 350px;
      float: left;
      margin: 10px 10px;
      background-color: orange;
      position: relative;
    }
    .innerBox {
      position: absolute;
      width: 250px;
      height: 300px;
      bottom: 0px;
      margin: 0 50px;
      background-color: blue;
      display: none;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="outerBox" id="outer1">
  <div class="innerBox" id="inner1"></div>
</div>
<div class="outerBox" id="outer2">
  <div class="innerBox" id="inner2"></div>
</div>