0

这是链接

当您将鼠标悬停在“TUI Exclusive Offering”下的四个图像框上时，您将获得问题标题中描述的效果。

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 位于底部的方法。此外，我还需要让它完全显示在鼠标悬停上。

如何实现那些？

4

3 回答 3

1

这是一个工作演示：http: //jsfiddle.net/qbyeC/

涉及 jQuery 时，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 代码是你的方式，除了我将 lower-div 更改为 lowerdiv 以匹配 maindiv。

于 2012-08-15T09:36:51.643 回答
1

可能这会帮助你。

脚本

 $(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-15T09:51:35.790 回答
0

你需要一个消极的立场（就像他们在 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和js中的原始位置（-20），同时你试图找到最好的起始位置。您可以通过在动画开始之前存储 original_position 来更优雅地做到这一点，但这可能在这里很远？我对stackoverflow很陌生

于 2012-08-15T09:37:31.643 回答