如何滑过其他元素？

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文件!