javascript - 在悬停jquery上从右向左滑动div

Question

美好的一天，我在使用 jquery 时遇到了问题。我在这里找到了一个主题，我想使用 jquery slide right to left div http://jsfiddle.net/PXLJG/2/ 来学习.

我想要实现的是悬停时，在特定的 div 上显示隐藏的内容。我尝试将 .addClass('active'); 添加到脚本中。这是我制作的脚本

 $(document).ready(function(){
        $('.holdingbox').hover(function(){
        var rightbox = $('.rightbox');
        if (rightbox.hasClass('active')){
            rightbox.stop().animate({width: '-0px'}, 1000).removeClass('active');
        } else {
            rightbox.stop().animate({width: '90px'}, 1000).addClass('active');
        }
        });
    });

现在的问题是，当我将鼠标悬停在一个 div 上时，所有 div 都会出现。 Please see attached image .希望你们能指出我正确的方向。谢谢

Answer 1

您需要在当前元素上下文中定位 rightbox 元素，即 this

您可以使用 context或 .find()定位子元素。

$('.holdingbox').hover(function() {
   var rightbox = $('.rightbox', this); //$(this).find('.rightbox')
}); 

$(document).ready(function() {
   $('.holdingbox').hover(function() {
     var rightbox = $('.rightbox', this);
     if (rightbox.hasClass('active')) {
       rightbox.stop().animate({
         width: '-0px'
       }, 1000).removeClass('active');
     } else {
       rightbox.stop().animate({
         width: '90px'
       }, 1000).addClass('active');
     }
   });
 });

div {
  display: inline-block;
}

.holdingbox {
  position: relative;
  top: 0;
  margin-left: 100px;
}

.leftbox {
  position: relative;
  top: 0;
  left: 0;
  display: inline-block;
  font-size: 24px;
  background-color: #ac193d;
  color: #FFF;
  font-weight: bold;
  padding: 1px;
}

.rightbox {
  position: relative;
  display: inline-block;
  overflow: hidden;
  width: 0;
  height: 30px;
  vertical-align: top;
  margin-right: 0;
}

.content {
  width: 100px;
  position: absolute;
  background-color: #ac193d;
  height: 29px;
  left: 0;
  top: 0;
  right: 0;
  color: #FFF;
  padding-left: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="holdingbox">
  <span class="rightbox"><span class="content">Kenyér</span></span>
  <span class="leftbox">></span>
 </div>

<div class="holdingbox">
  <span class="rightbox">
  <span class="content">Kenyér</span>
  </span>
  <span class="leftbox">></span>
</div>