javascript - 如何滑过其他元素？

Question

我有很多 div(连续 3 个)，我想在鼠标悬停时滑动它们。现在所有的 div 都在移动，而且看起来不太好。我想要的是滑动悬停的 div(更改其高度，并停留在其他 div 上方)，但其他 div 保持在同一位置。

因此只有 .desc 会显示在“Some text”和“Price”之间。

HTML:

<div id="list">
    <div class="list-new">
        <p>Some text...</p>
        <p class="desc">Some hidden text...<br />Another line of hidden text...</p>
        <p class="price">9.99 €</p>
    </div>
    ... <!-- other divs here -->
</div>

jQuery:

$(document).ready(function() {
    $(".list-new").mouseenter(function(e) {
        $(this).find(".desc").slideDown();
    });

    $(".list-new").mouseleave(function(e) {
        $(this).find(".desc").slideUp();
    });
});

CSS:

#list {
    width: 320px;
}

.list-new {
    display: block;
    position: relative;
    float: left;
    width: 98px;
    min-height: 80px;
    margin: 0px 10px 10px 0px;
    background-color: #000;
    color: #fff;
    text-align: center;
    cursor: pointer;
    border: 1px solid #f00;
}

.list-new:nth-child(3n) {
    margin-right: 0px;
}

.list-new p.desc {
    display: none;
    background-color: black
    width: 98px;
    margin-bottom: 35px;
}

.list-new p.price {
    position: absolute;
    width: 98px;
    bottom: 10px;
    margin: 0 auto;
    color: #fff;
    font-weight: bold;
}

更新的 jsFiddle:

JSFIDDLE

Answer 1

你可以添加:

.desc {
    position:absolute;
    background-color: black;
    margin-top: -10px;
    width: 100px;
}

到你的css文件!