Javascript 如何在其他元素上滑动？

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

因此，只需在“某些文本”和“价格”之间显示

.desc

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>

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

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

$('.list-new').each(function(i) {
  $(this).children().wrapAll('<div class="abs" style="z-index:'+(999-i)+'"/>');
});

.abs {
  position: absolute;
  background: black;
}

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;
}

更新的JSFIDLE:

<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>

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

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

$('.list-new').each(function(i) {
  $(this).children().wrapAll('<div class="abs" style="z-index:'+(999-i)+'"/>');
});

.abs {
  position: absolute;
  background: black;
}

您可以添加：

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

到你的css文件

您可以添加：

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

---

到你的css文件

使用纯css代码更好。我建议您使用浮动，并通过在布局中定位元素的属性进行更改。Float是一种很糟糕的做法，为了应用与IE6/IE7的兼容性而进行了扩展，但在21世纪并不必要

---

如果使用display:inline块而不是float:left，则div不会移动其位置（例如包括垂直对齐：top）。

使用纯css代码更好。我建议您使用浮动，并通过在布局中定位元素的属性进行更改。Float是一种很糟糕的做法，为了应用与IE6/IE7的兼容性而进行了扩展，但在21世纪并不必要

---

如果使用display:inline block而不是float:left，div不会移动到其位置（例如包括垂直对齐：top）。

所以我最终使用了

clone（）

和其他一些jQuery代码

$(document).ready(function() {
    $(".list-new").mouseenter(function() {
        var clone = $(this).clone(),
            pos   = $(this).position(),
            id    = $(this).attr('data-id');

        clone.find('.desc').css('display', 'block');

        clone
            .attr('id', 'list_over_' + id)
            .addClass('list-new-hovered')
            .css({
                'display': 'none',
                'position': 'absolute',
                'left': pos.left,
                'top': pos.top,
                'z-index': 10
            })
            .appendTo($(this).parent())
            .on('mouseleave', function() {
                $('#list_over_' + $(this).attr('data-id')).stop(true, true).fadeOut('slow', function() {
                    $(this).remove();
                });
            })
            .stop(true, true)
            .fadeIn('slow');
    });
});

---

所以我最终使用了

clone（）

和其他一些jQuery代码完成了这项工作

$(document).ready(function() {
    $(".list-new").mouseenter(function() {
        var clone = $(this).clone(),
            pos   = $(this).position(),
            id    = $(this).attr('data-id');

        clone.find('.desc').css('display', 'block');

        clone
            .attr('id', 'list_over_' + id)
            .addClass('list-new-hovered')
            .css({
                'display': 'none',
                'position': 'absolute',
                'left': pos.left,
                'top': pos.top,
                'z-index': 10
            })
            .appendTo($(this).parent())
            .on('mouseleave', function() {
                $('#list_over_' + $(this).attr('data-id')).stop(true, true).fadeOut('slow', function() {
                    $(this).remove();
                });
            })
            .stop(true, true)
            .fadeIn('slow');
    });
});

---

从

中删除
位置：绝对值
。列出新的p.price
，因为您希望它在
滑动过程中被移动（）

使用jQuery包装每个
。在
div中列出新的
子项，并使用绝对定位和递减的
z索引
：

jQuery:

<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>

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

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

$('.list-new').each(function(i) {
  $(this).children().wrapAll('<div class="abs" style="z-index:'+(999-i)+'"/>');
});

.abs {
  position: absolute;
  background: black;
}

从
中删除
位置：绝对值
。列出新的p.price
，因为您希望它在
滑动过程中被移动（）

使用jQuery包装每个
。在
div中列出新的
子项，并使用绝对定位和递减的
z索引
：

jQuery:

<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>

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

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

$('.list-new').each(function(i) {
  $(this).children().wrapAll('<div class="abs" style="z-index:'+(999-i)+'"/>');
});

.abs {
  position: absolute;
  background: black;
}

Hm。我很可能会通过编程来实现这一点——可能是通过给它们所有的
位置：绝对值
，使用逻辑以这种方式将它们排列在网格中，确保增加到它们的
z-index
。是的，这可能是唯一的解决方案。我希望通过
CSS
和
jQuery
.Hm以某种方式实现它。我很可能会通过编程来实现这一点——可能是通过给它们所有的
位置：绝对
，使用逻辑以这种方式在网格中排列它们，确保增加到它们的
z索引
。是的，这可能是唯一的解决方案。我希望通过
CSS
和
jQuery
以某种方式实现这一点。这是一个很好的解决方案，但没有达到预期效果。因为还有其他因素。我更新了我的JSFIDLE。我更新了你的。最后一个问题是，鼠标悬停时，desc在关闭时隐藏，您可以在jQuery中编写一个回调来编辑z-index（
$（this）。查找（'.desc'）.css（'z-index'，0'）；
）看起来更好，但“某些文本”和“隐藏文本”之间仍然有巨大的空白。无论如何，我终于做到了（如我的答案所示），感谢您的帮助-这是一个很好的解决方案，但没有达到预期效果。因为还有其他因素。我更新了我的JSFIDLE。我更新了你的。最后一个问题是，鼠标悬停时，desc在关闭时隐藏，您可以在jQuery中编写一个回调来编辑z-index（
$（this）。查找（'.desc'）.css（'z-index'，0'）；
）看起来更好，但“某些文本”和“隐藏文本”之间仍然有巨大的空白。无论如何，我终于做到了（如我的答案所示），感谢您的帮助-我正在查看您的JSFIDLE，我的答案与此无关。对不起。但我要说的是，您可以通过两种技术来实现这一点：或者在slideToggle（）运行时控制负边距底部，或者您只能通过元素的绝对定位来归档。我终于做到了（如我的答案所示），无论如何，感谢您的帮助-我正在查看您的JSFIDLE，我的答案与此无关。对不起。但我要提醒你一件事，你可以通过两种技术来实现这一点：或者在slideToggle（）运行时控制负边距底部，或者你只能通过元素的绝对定位来归档。我终于做到了（如我的回答所示），无论如何，谢谢你的帮助-很高兴你找到了它，我只是想建议一个覆盖解决方案：D很高兴你找到了，我只是想建议一个覆盖解决方案：D也是一个不错的解决方案，只需在那里添加
停止（真的，真的）
，因为在所有元素上移动几秒钟；-）你是说
$（this）.find（.desc”）.slideDown（）.stop（true，true）？如果不想显示动画，可以执行
$（this.find（“.desc”）.fadeIn（）
或
$（this.find（“.desc”）.show（）。我在网站上使用它时遇到一个问题-它反复发射
mouseenter
和
mouseleave
，你能看一下吗-（看起来你的克隆方法当前正在运行。你有我的代码的草稿版本吗？现在可以了。问题是，（我不知道为什么）使用了
clone（true，true）；
而不是
clone（）；
，但是在jsFiddle上，我正确地使用了它，就像
clone（）；
…也是一个很好的解决方案，只需在那里添加
stop（true，true）
，因为在所有元素上移动几秒钟；-）你的意思是
$（this.find（.desc”）.slideDown（）.stop（true，true）？如果不想显示动画，可以执行
$（this.find（“.desc”）.fadeIn（）
或
$（this.find（“.desc”）.show（）。我在网站上应用它时遇到了一个问题-它反复发射
mouseenter
和
mouseleave
，可以吗