javascript - 在它旁边的悬停图像显示 div

Question

任何帮助将不胜感激!截至目前，我有以下内容......当您将鼠标悬停在左侧的图像上时，div 会显示在它旁边并向左/向右切换。但是，我的页面上需要四个，当我将鼠标悬停在一个上时，其余的也一样，我怎样才能将它们分开？或者有更好的方法......即。显示/隐藏功能...我将如何使用 Jquery 来解决这个问题？我已经搜索了几个地方，但没有一个显示我需要的东西。谢谢。

$(document).ready(function(){
  $(".slide-toggle").hover(function(){
    $(".box").animate({
      width: "toggle"
    }); 
  });
 });

.slide-toggle {
  float:left;
}
.box{
  float:left;
  overflow: hidden;
  background: #f0e68c;
}
.box-inner{
  width: 100px;
  height:30px;
  padding: 10px;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img class="slide-toggle" src="tree.png" width="50" height="50">
<div class="box">
  <div class="box-inner">Lorem ipsum dolor sit amet...</div>
</div>

Answer 1

您可以使用 .next() 和 ".box" 作为参数

$(document).ready(function() {
  $(".slide-toggle").hover(function() {
    $(this).next(".box").animate({
      width: "toggle"
    });
  });
});

.slide-toggle {
  float: left;
}
.box {
  float: left;
  overflow: hidden;
  background: #f0e68c;
}
.box-inner {
  width: 100px;
  height: 30px;
  padding: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img class="slide-toggle" src="tree.png" width="50" height="50">
<div class="box">
  <div class="box-inner">Lorem ipsum dolor sit amet...</div>
</div>
<img class="slide-toggle" src="tree.png" width="50" height="50">
<div class="box">
  <div class="box-inner">Lorem ipsum dolor sit amet...</div>
</div>