实现部分显示在另一分区内自下而上一个div充分显示在鼠标悬停

当你把鼠标悬停在“TUI独家发售”四个图像框，你得到的问题标题中描述的效果。

HTML：

<div class="maindiv"> 
<img src="img/img.jpg" /> 


<div class="lower_div"> 

this is the lower div1<br> 
this is the lower div2<br> 
this is the lower div3<br> 
this is the lower div4<br> 
this is the lower div5<br> 
this is the lower div6<br> 
</div> 
</div>

使lower_div的方式坐在底部使其位置absolute和bottom 0。但无论什么原因，在我的大HTML页面，这种技术不起作用，虽然它在另一个只包含这个片段的HTML页面中工作。

所以我正在寻找另一种方式使div坐在底部。除此之外，我还需要让它在mousehover上完全显示出来。

如何实现这些？

来源

2012-08-15 Istiaque Ahmed

定义 “不工作” 是什么呢？ – Onheiron 2012-08-15 09:27:31

lower_div只是下降到页面的底部.. – 2012-08-15 09:28:14

你有没有试图在main_div和lower_div上设置相对位置？ – Stano 2012-08-15 09:30:25

这里是一个工作演示：当jQuery的参与http://jsfiddle.net/qbyeC/

的JavaScript是简单的。你所要做的就是为每个maindiv定义mouseenter和mouseleave。

$('.maindiv').on({ 
    mouseenter : function(e){ 
     $(this).children('.lowerdiv').stop(true,false);      
     $(this).children('.lowerdiv').animate({top:0,marginTop:0}); 
    }, 
    mouseleave : function(e){ 
     $(this).children('.lowerdiv').stop(true,false); 
     $(this).children('.lowerdiv').animate({top:'100%',marginTop:'-40px'}); 
    } 
});

这将检查lowerdiv类并将其动画到每个事件的正确位置。注意：mouseleave第二行的marginTop应该与lowerdiv类的margin-top css属性相匹配。这是您希望div在鼠标不在元素上时伸出的量。

的CSS应该进行修改，以自己的喜好，但这些是重要的部分：

.maindiv { 
    overflow:hidden; 
    position:relative; 
} 
.lowerdiv { 
    position:absolute; 
    width:100%; 
    bottom:0px; 
    top:100%; 
    margin-top:-40px; 
}

的HTML代码是你如何把它除非我改变lowerdiv到lowerdiv匹配maindiv。

来源

2012-08-15 09:36:51

你需要一个负位置（因为他们这样做，是TUI页），开始像

position:absolute; 
bottom:-20px;

，并尝试周围，直到它适合。使用jQuery

，那么你可以这样做：

$('.maindiv').hover(
    function() { 
    $(this).find('.lower_div').stop(true, false).animate({'bottom':0}); 
    }, 
    function() { 
    $(this).find('.lower_div').stop(true, false).animate({'bottom':-20}); 
    } 
);

http://api.jquery.com/hover/

当然这种方式，你总是有，而你试图改变你的CSS原来的位置（-20）和JS找到最佳的起始位置。通过在动画开始之前存储original_position，您可以更优雅地做到这一点，但是这可能会在这里？我是比较新的stackoverflow

来源

2012-08-15 09:37:31 m7o

有一点建议可以在每次动画之前调用'$（this）.find（'。lower_div'）。stop（true，false）'。如果先前的动画未完成，这将确保动画在其轨道上停止，以便在事件触发时立即开始新的动画。 – 2012-08-15 09:45:48

感谢您的建议 - 我添加了。 – m7o 2012-08-15 09:49:19

可能这会帮助你。

SCRIPT

$(function(){ 
    $(".maindiv").hover(function(){ 
     $(this).children('.lowerdiv').stop().animate({top:0}) 
    },function() { 
      $(this).children('.lowerdiv').stop()..animate({top:150}) 
     }) 
})

HTML

<div class="maindiv"> 
    Main div content 
    <div class="lowerdiv"> 
     lowediv content 
    </div> 
</div> 
<div class="maindiv"> 
    Main div content 
    <div class="lowerdiv"> 
     lowediv content 
    </div> 
</div>

CSS

.maindiv{ 
    height:200px; 
    width:200px; 
    background:#CCC; 
    position:relative; 
    overflow:hidden; 
    float:left; 
    margin:10px; 
} 
.lowerdiv{ 
    height:200px; 
    width:200px; 
    background:#797987; 
    position:absolute; 
    top:150px; 
}

的jsfiddle - http://jsfiddle.net/tRYTq/4/

来源

2012-08-15 09:51:35 Abhishek

实现部分显示在另一分区内自下而上一个div充分显示在鼠标悬停

回答

相关问题