Question

美好的一天，我遇到了jquery问题。我在这里找到了一个主题，我想学习使用jquery slide从右到左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 元素，即$URI = "http://www.trlibor.org/fixingrates.asp" $HTML = Invoke-WebRequest -Uri $URI $1MRate = $HTML.ParsedHtml.getElementsByTagName("td")[11].InnerText $1MRate = $1MRate.replace(',','.') $1MRate $2MRate = $HTML.ParsedHtml.getElementsByTagName("td")[15].InnerText $2MRate= $2MRate.replace(',','.') $2MRate $3MRate = $HTML.ParsedHtml.getElementsByTagName("td")[19].InnerText $3MRate= $3MRate.replace(',','.') $3MRate $6MRate = $HTML.ParsedHtml.getElementsByTagName("td")[23].InnerText $6MRate= $6MRate.replace(',','.') $6MRate $9MRate = $HTML.ParsedHtml.getElementsByTagName("td")[27].InnerText $9MRate= $9MRate.replace(',','.') $9MRate $1YRate = $HTML.ParsedHtml.getElementsByTagName("td")[31].InnerText $1YRate= $1YRate.replace(',','.') $1YRate

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

this

＆＃13;

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

＆＃13;

$(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');
     }
   });
 });

＆＃13;

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;
}

＆＃13;

Answer 2

将代码更改为此

你会以这种方式让孩子们感受到悬停的元素。不使用$（this），您可以定位文档中的所有'.rightbox'元素。

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

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

2 个答案: