Question

我希望当我悬停某个特定按钮时，尺寸会被放大，按钮会突出显示在其他按钮的顶部，而不会影响上面jsfiddle中当前其他按钮的位置。

<img src='http://cdn.mxpnl.com/site_media/images/partner/badge_light.png' />
<img src='http://cdn.mxpnl.com/site_media/images/partner/badge_light.png' />
<img src='http://cdn.mxpnl.com/site_media/images/partner/badge_light.png' />

<script>
jQuery('img').hover(function() {
    $(this).attr('width', '200px');
}, function() {
    $(this).attr('width', '100px');
});
</script>

Answer 1

首先，我强烈建议您使用纯CSS。

其次，我认为你可以用transform比例来实现这个目标：

img:hover
{
    transform: scale(1.5, 1.5);
    -ms-transform: scale(1.5, 1.5)); /* IE 9 */
    -webkit-transform: scale(1.5, 1.5);
}

你可以自己玩这个比例。请注意，我添加了一个marign，因此图像不会离开屏幕

jsFiddle

Answer 2

更改了您的代码。请尝试 Fiddle

<强> CSS ：

.img{
    float:left;
    margin:0px 10px;
    position: fixed;
    top:10px;

}
.img1{
    left:0px;
    z-index:3;

}
.img2{
    left:120px;
     z-index:2;

}
.img3{
    left:240px;
     z-index:1;
}

Answer 3

在悬停时我尝试将css位置修复，请尝试这个新的jsfiddle - http://jsfiddle.net/c3hwf/

CSS代码

img{
    width: 100px;
}
img:hover{
    width:200px;
    position: fixed
}

HTML代码

<p>This is just a test</p>
<img src='http://cdn.mxpnl.com/site_media/images/partner/badge_light.png' />
<img src='http://cdn.mxpnl.com/site_media/images/partner/badge_light.png' />
<img src='http://cdn.mxpnl.com/site_media/images/partner/badge_light.png' />

Answer 4

Collection of Creative button Hover and Click Effects

Answer 5

宽度CSS2：

DEMO

div{width:100px; float:left;border:1px solid #fff; margin-right:5px}
div img{width:100%;}

jQuery('img').hover(function() {
    $(this).css({width : '200px', position:'absolute'});
}, function() {
    $(this).css({width: '100px', position:'static'});
});

如何在悬停时使图像按钮突出而不影响其他按钮位置

5 个答案:

jsFiddle