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>

Expand div

Answer 1

在这里，我从头开始制作了一个，但是它有一个不同的（并且更好的）HTML布局，它也使用纯CSS，不需要JavaScript。

EDIT 1更新了JSFiddle更好的示例＆amp;更好的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 Pseudo classes选择器:hover。

试试这个：

article:hover .share_in
{
    display:block;
}

Working Example

Answer 3

你必须先显示：none;分享链接。然后你可以使用那个

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

Answer 4

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

<div class="share_buttons">

同样，对于那种情况，最好为元素设置一个id而不是一个类，因为这只是该元素的唯一。

因此您可以将position属性设置为absolute并更改margin / padding css属性，

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

Answer 5

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

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

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

Answer 6

如果我做对了你想要＆＃34; share_buttons＆＃34; div在悬停时向上滑动并向下滑动鼠标！如果是这样，你必须注意＆＃34; share_buttons＆＃34;的位置。 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 7

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

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

Answer 8

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

在另一个div的顶部展开div（悬停）

8 个答案: