gpt4 book ai didi

javascript - jQuery - 扩展 div 并且不让其他人移动

转载 作者:行者123 更新时间:2023-11-30 13:00:55 26 4
gpt4 key购买 nike

我有一些 div 并通过 jQuery 对其产生了一些影响。当我将鼠标悬停在一个 div 上时,它会展开。但随后它旁边和下面的 div 会随之移动。我想要与 1k repuration 后在 stackoverflow 上给出的可扩展用户卡相同的效果。

This这就是我所做的。

JS:

$(document).ready(function () {
var delay = 1000;
$(".user").hover(function () {
$(this).css("background-color", "#eee");
$(this).delay(delay).animate({
width: '350px',
height: '200px'
});
$(this).find("img").delay(delay).animate({
marginTop: '+=5px',
marginLeft: '+=5px'
});
}, function () {
$(this).css("background-color", "#fff");
$(this).delay(delay).animate({
width: '300px',
height: '50px'
});
$(this).find("img").delay(delay).animate({
marginTop: '-=5px',
marginLeft: '-=5px'
});
});
});

简而言之:

  1. 我希望当 div 展开时 div 保持不变
  2. 我希望如果鼠标在 div .user 上停留 0.5 秒,则 div 应该展开,否则什么也不会发生。

最佳答案

这完全可以在 CSS3 中完成,这就是您要查找的内容:包装每个 <div class="user"><div class="userWrap"> .然后,使用以下 CSS:

.userWrap {
position: relative;
display: inline-block;
width: 300px;
height: 50px;
overflow: visible;
z-index: 1;
}
.userWrap:hover {
z-index: 2;
}
.user {
position: absolute;
width: 300px;
height: 50px;
margin-bottom: 5px;
background: #fff;
transition: width 0.3s, height 0.3s;
}
.user:hover {
width: 350px;
height: 200px;
background: #eee;
transition: width 0.3s ease 0.5s, height 0.3s ease 0.5s;
}

达到预期的效果。

See a demo here.

关于javascript - jQuery - 扩展 div 并且不让其他人移动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17429540/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com