jQuery 使用jQuery在悬停/退出时扩展/缩小div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12056950/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Expand / shrink div on hover / out with jQuery
提问by Max
I am looking for a jQueryplugin to expand divelements so as to reveal their overflow (if any) on hover. Illustration:
我正在寻找一个jQuery插件来扩展div元素，以便在悬停时显示它们的溢出（如果有）。插图：
The plugin should work on relatively positioned div's (which I guess implies that you create a copy of the div, set its positioning to absolute, then figure out where to place it).
该插件应该在相对定位的div's 上工作（我猜这意味着您创建了 的副本div，将其定位设置为绝对，然后找出放置它的位置）。
Is there such a plugin already available out there?
有没有这样的插件可用？
回答by Dziad Borowy
You don't need a plugin. Just add proper css and use jQuery animate:
你不需要插件。只需添加适当的 css 并使用 jQuery 动画：
$div
.on('mouseenter', function(){
$(this).animate({ margin: -10, width: "+=20", height: "+=20" });
})
.on('mouseleave', function(){
$(this).animate({ margin: 0, width: "-=20", height: "-=20" });
})?
回答by Mark Pieszak - Trilon.io
The images are missing here... but here is how I pulled this off a few years ago. The basic theory is that all of the images/div's whatever are absolute, inside of their own relative area. I then animate the left & topposition both -negatively. This makes them protrude above the surrounding boxes and look like they are popping out. (Of course you also need to make sure the z-index of this one is higher than the ones around it).
此处缺少图像……但这是我几年前完成的方法。基本理论是，所有的图像/div 都是绝对的，在它们自己的相对区域内。然后我为left & top两个位置设置动画-negatively。这使它们突出在周围的盒子上方，看起来像是弹出来的。（当然，您还需要确保这个的 z-index 高于它周围的 z-index）。
$(".img a img").hover(function() {
$(this).closest(".img").css("z-index", 1);
// this is where the popping out effect happens
$(this).animate({ height: "200", width: "200", left: "-=55", top: "-=55" }, "fast");
}, function() {
$(this).closest(".img").css("z-index", 0);
$(this).animate({ height: "90", width: "90", left: "+=55", top: "+=55" }, "fast");
});?
The styles I have for these two things are:
我对这两件事的风格是：
.img {
position:relative;
z-index:0px;
}
.img a img {
position:absolute;
border:1px #1b346c solid;
background:#f1f1f1;
width:90px;
height:90px;
}
回答by jmeinlschmidt
thanks to @MarkPieszak. For dynamically createdelements use
感谢@MarkPieszak。对于动态创建的元素使用
$(document).on({
mouseenter: function () {
$(this).animate({ height: "200", width: "200", left: "-=55", top: "-=55" }, "fast");
},
mouseleave: function () {
$(this).animate({ height: "90", width: "90", left: "+=55", top: "+=55" }, "fast");
}
}, '.img a img');
.hover()does work only on static elements. more here
.hover()仅适用于静态元素。更多在这里
回答by Polv
If it is text, it is a little more complicated...
如果是文字，就稍微复杂一点……
I use it like this:
我像这样使用它：
$('.floating').mouseenter(function(){
const $this = $(this);
const dimension = $this.data('dimension');
const ratioEnlarged = 2;
const tempElement = $this.clone();
tempElement.appendTo('body');
tempElement.css({
width: dimension.width,
height: dimension.height
});
if(tempElement.is(':offscreen')){
// Change this to animate if you want it animated.
$this.css({
'margin-left': -dimension.width * ratioEnlarged/2,
'margin-top': -dimension.height * ratioEnlarged/4,
'font-size': ratioEnlarged + 'em',
width: dimension.width * ratioEnlarged,
height: dimension.height * ratioEnlarged
});
} else {
$this.css({
'margin-left': -dimension.width * ratioEnlarged/4,
'margin-top': -dimension.height * ratioEnlarged/4,
'font-size': ratioEnlarged + 'em',
width: dimension.width * ratioEnlarged,
height: dimension.height * ratioEnlarged
});
}
tempElement.remove();
});
$('.floating').mouseleave(function(event) {
const $this = $(this);
const dimension = $this.data('dimension');
if(!$this.hasClass('context-menu-active')){
$this.css({
margin: 0,
'font-size': '1em',
width: dimension.width,
height: dimension.height
});
}
});
回答by Nick
You can actually do this entirely with css, this is a snipet from a website of mine, im entirly too lazy to edit it, but you get the idea:
实际上，您可以完全使用 css 来完成此操作，这是来自我的网站的 snipet，我完全懒得编辑它，但是您明白了：
<ul class="hover">
<li style="margin-top:40px;"">
<a href=""><img src="images/Home/Home.jpg" alt="home" style="width:130px; height:100px;"/>
<img src="images/Home/Home.jpg" alt="home" class="preview" style="width:180px; height:150px;"/></a>
</li>
<li style="margin-left:55px; margin-top:-20px;">
<a href=""><img src="images/About/About.jpg" alt="About The Author" style="width:200px; height:200px;"/>
<img src="images/About/About.jpg" alt="About The Author" class="preview" style="width:250px; height:250px;"/></a>
</li>
</ul>
css:
css：
/* begin hover */
.hover{
cursor: default;
list-style: none;
}
.hover a .preview{
display: none;
}
.hover a:hover .preview{
display: block;
position: absolute;
top: -33px;
left: -45px;
z-index: 1;
}
.hover img{
background: white;
border-color: black;
border-style: solid;
border-width: 4px;
color: inherit;
padding: 2px;
vertical-align: top;
-moz-border-radius: 15px;
border-radius: 15px;
}
.hover li{
background: black;
border-color: black;
border-style: solid;
border-width: 1px;
color: inherit;
display: block;
float: left;
margin: 3px;
padding: 5px;
position: relative;
}
.hover .preview{
border-color:black;
border-width:8px;
border-stle:solid;
}
li{
-moz-border-radius: 15px;
border-radius: 15px;
}
there are some not needed styles in there but again, you get the idea. basically youre just showing one image on top of the original, on hover
那里有一些不需要的样式，但同样，你明白了。基本上你只是在原图的顶部显示一个图像，悬停
