在悬停jquery上从右向左滑动div答案

【问题标题】：slide right to left div on hover jquery在悬停jquery上从右向左滑动div
【发布时间】：2017-07-12 15:57:30
【问题描述】：

美好的一天，我在使用 jquery 时遇到问题。我在这里找到了一个我想学习的主题，使用 jquery 从右向左滑动 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。希望你们能指出我正确的方向。谢谢

【问题讨论】：

标签： javascript jquery html css

【解决方案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>

【讨论】：

它现在可以工作了。你能向我解释为什么添加这个有效吗？非常感谢您的回答。
@Gilberte., 使用上下文或.find()，它只针对子 rightbox _ _holdingbox 元素

【解决方案2】：

把代码改成这个

您将通过这种方式获得悬停元素的子元素。在不使用 $(this) 的情况下，您将定位到文档中的所有“.rightbox”元素。

   $('.holdingbox').hover(function(){
    $(this).find('.rightbox').stop().animate({width: '90px'}, 1000)
}, function(){
    $(this).find('.rightbox').stop().animate({width: '-0'}, 1000)
});

【讨论】：