1

我想要创建的是这样的。悬停时应该有一个带有信息的向下滑动（就像鼠标悬停在 img 上的示例中一样）。我有的是这个。问题是当指针位于子元素（<a>或<p>）上时，信息框会上下弹跳。

的HTML：

  <ul>
   <li>
   <div id="box_1" class="prevw_box">
     <div id="box_1-rep" class=" box-rep text1"><h3>CONDUCTIVE GRID TAPE</h3>
    <p class="p1">A lot of text ......a lot of text</p>

     <a class="see_product" href="#"></a>

     </div>

    </div>
   </li>

  </ul>

的CSS：

    .box-rep {
     position:absolute;
     top:-220px;
     left:0;
     width:238px;
     height:440px;
     background-color:#887455; }

   .prevw_box {
      position:relative;
      float:left;
      width:238px;
      height:220px;
      overflow:hidden;}

当然jQuery代码是：

  $('.box-rep')
.css({top:"-220px",opacity:"0.0"})
.mouseover(function(){
    $(this).stop().animate(
        {top:"0px",opacity:"0.8"},{duration:250})
        //$(this).stop()
    })

.mouseout(function(){
    $(this).animate(
        {top:"-220px",opacity:"0.0"},{duration:250})
})

在过去的几天里，我一直在努力解决这个问题，但我不能再忍受了。我需要这个想法，替代解决方案。

感谢您的快速答复！最近因为这个我很沮丧。我尝试了很多变体，我一遍又一遍地重做代码。问题已经解决了！再次感谢！

4

6 回答 6

3

尝试使用 mouseenter 和 mouseleave，而不是 mouseover、mouseout。

$('.box-rep')
.css({top:"-220px",opacity:"0.0"})
.mouseenter(function(){
$(this).stop().animate(
    {top:"0px",opacity:"0.8"},{duration:250})
    //$(this).stop()
})

.mouseleave(function(){
$(this).animate(
    {top:"-220px",opacity:"0.0"},{duration:250})
})
于 2012-12-21T08:37:05.263 回答
1

您的.mouseover方法看起来不错，但您可能也应该添加一个.stop()，.mouseout method这样您的代码将如下所示：

$('.box-rep')
.css({top:"-220px",opacity:"0.0"})
.mouseover(function(){
    $(this).stop().animate(
        {top:"0px",opacity:"0.8"},{duration:250})
        //$(this).stop()
    })

.mouseout(function(){
    $(this).stop().animate(
        {top:"-220px",opacity:"0.0"},{duration:250})
})

尝试并更新您的测试网址

于 2012-12-21T08:36:38.663 回答
1

我会这样做：

$('#nav_bar li').css('backgroundPosition', '-224px 0').on({
    mouseenter: function() {
        $(this).stop(true,true).animate({backgroundPosition:"(-20px 0px)"}, 250);
    },
    mouseleave: function() {
        $(this).stop(true,true).animate({backgroundPosition:"(-224px 0px)"}, 250);
   }
});

$('.box-rep').css({top:"-220px",opacity:"0.0"}).on({
    mouseenter: function() {
        $(this).stop(true, true).animate({top:"0px",opacity:"0.8"},250);
    },
    mouseleave: function() {
        $(this).stop(true, true).animate({top:"-220px",opacity:"0.0"},250);
    }
});

演示| 代码 ​</p>

缩短的版本如下所示：

$('#nav_bar li').css('backgroundPosition', '-224px 0').on('mouseenter mouseleave', function(e) {
    $(this).stop(true,true).animate({backgroundPosition:"(-"+(e.type=='mouseenter'?20:224)+"px 0px)"}, 250);
});

$('.box-rep').css({top:"-220px",opacity:"0.0"}).on('mouseenter mouseleave', function(e) {
    var state = e.type=='mouseenter';
    $(this).stop(true, true).animate({top: (state?0:-220),opacity:state?0.8:0},250);
});

小提琴

于 2012-12-21T08:41:22.203 回答
1

只需stop()在您的电话中添加一个电话mouseout，它就像一个魅力。

jsFiddle在这里

于 2012-12-21T08:43:57.740 回答
0

只需使用jquery.hover代替mouseoverand mouseout- http://api.jquery.com/hover/

$('.box-rep')
.css({top:"-220px",opacity:"0.0"})
.hover(function(){
    $(this).stop().animate(
        {top:"0px",opacity:"0.8"},{duration:250})
        //$(this).stop()
    }, function(){
    $(this).animate(
        {top:"-220px",opacity:"0.0"},{duration:250})
})​

JsFiddle：http: //jsfiddle.net/HDUVK/

于 2012-12-21T08:40:10.880 回答
0

以这种方式使用它：

$('.box-rep').css({
   "top": "-220px",
   "opacity": "0.1"
}).mouseover(function() {
   $(this).stop().animate({
      top: "0px",
      opacity: "0.8"
}, 250);
}).mouseout(function() {
  $(this).animate({
      top: "-220px",
      opacity: "0.1"
}, 250);
});

小提琴在这里：http: //jsfiddle.net/Gbqpv/

于 2012-12-21T08:44:18.480 回答