jquery - 在另一个 div 之上展开一个 div（悬停时）

Question

如何在另一个 div 上扩展一个 div（悬停）？我怎么能像附图中所示的那样做？

<article>
    <header>
        content title
    </header>
    <div>
        main article content
    </div>
    <div class="share_buttons">
        <div class="">SHARE</div>
        <div class="share_in">
            <a>FACEBOOK</a>
            <a>GOOGLE+</a>
            <a>LINKEDIN</a>
            <a>PICASA</a>
        </div>
    </div>
</article>

Answer 1

在这里，我从头开始制作了一个完整的东西，但它具有不同的（更好的）HTML 布局，它还使用纯 CSS，不需要 JavaScript。

EDIT 1更新了 JSFiddle 更好的示例和更好的 CSS 布局。

HTML

<div class='box'>
    <div class='box-cnt'>Lorem ipsum dolor sit amet, dicunt perpetua te mei. Vis id tritani utroque copiosae...</div>

    <div class='box-share'>
        <div class='share-title'>Share</div>
        <div class='share-items'>
            <div class='item'>Facebook</div>
            <div class='item'>Google</div>
            <div class='item'>MySpace</div>
        </div>
    </div> 
</div>

CSS

.box {
    width: 400px;
    height: auto;
    min-height: 300px;
    padding-bottom: 55px;
    border: 1px solid lightgray;
    position: relative;
}

.box-share {
    position: absolute;
    z-index: 2;
    bottom: 0;
    background: lightgray;
    width: 100%;
    height: 50px;
    overflow:hidden;
    transition: height 450ms;
    -moz-transition: height 450ms;
    -webkit-transition: height 450ms;
}

    .box-share:hover {
        height: 100px;
    }

.share-title {
    height: 50px;
    width: 100%;
    text-align: center;
    line-height: 3.2;
}

.share-items {
    width: 100%;
    height: 50px;
}

.box-cnt {
    width: 100%;
    height: auto;
}

.item {display: inline-block;height: 100%;margin: 5px;}

这是一个示例JSfiddle

Answer 2

您可以使用 CSS伪类选择器:hover。

尝试这个：

article:hover .share_in
{
    display:block;
}

工作示例

Answer 3

如果我说对了，您希望“share_buttons” div 在悬停时向上滑动并在鼠标滑出时向下滑动！如果是这样，您必须注意“share_buttons” div 的位置必须是绝对的、相对的或固定的！如果是这样，这是执行此操作的代码：

$(.share_buttons).hover(function(){
    addedHeight='the height that you want it to grow to e.g. 100px';
    $(this).animate({
        height:addedHeight,
        marginTop:'-'+addedHeight
    },500);
},function(){
    $(this).animate({
        height:'the default height',
        marginTop:0
    },500);
});

Answer 4

尝试这个。请记住，XXpx 是 div.share_in 的高度，以像素为单位。如果你创造了一个小提琴会更好。

$( ".share_buttons" ).hover ( function() {
    $( ".share_in" ).animate( { "height" : "XXpx" } );
}, function() {
    $( ".share_in" ).animate( { "height" : "0px" } );
} );

Answer 5

使用hover()获得悬停效果，使用animate()获得滑动效果。

$('.share_buttons').hover(function(){

    $('.share_in').animate("...");
});

Answer 6

您可以在悬停后更改 div 元素位置，我猜它是：

<div class="share_buttons">

此外，在这种情况下，最好为元素设置一个 id 而不是类，因为这仅对该元素是唯一的。

因此您可以将位置属性设置为绝对并更改边距/填充 css 属性，

这是一个选项，还有更多......你应该玩它，这个想法是整个 div 都在那里，你只需显示/取消显示它。

Answer 7

您必须首先显示：无；分享链接。那么你可以使用它

$( "#div-selector" ).onhover(function() {
    $( "#share-link" ).slideUp( "slow", function() {
    // Animation complete.
    });
});

Answer 8

    $('.main_content').hover(function(){         $('.share_buttons').slideDown('slow',500);      },
    function(){         $('.share_buttons').slideUp('slow',500);      }
);