Question

我试图制作一个工具栏，当您将鼠标悬停在工具栏上时，每个图像都会放大。但是，我只希望你所使用的图标成为移动的图标。正如我的代码现在，整个线路都在变化。

以下是我使用的javascript：

     $('.socialmediaBar img').mouseenter(function() {
    $(this).stop().animate({ width: "+=2%", height: "+=20%" });
});

$('.socialmediaBar img').mouseleave(function() {
    var x = $(this).attr('width'),
        y = $(this).attr('height');

    $(this).stop().animate({ width: x, height: y });
});

这是css：

.socialmediaBar{
    height:30px;
    width: 500px;
    margin: 0 auto;
    margin-top:15px;
    text-align: center;
    padding-top:25px;
    border: 1px solid black;
}

.socialmediaBar img{
    position: static;
    margin-left:auto;
    margin-right: auto;
    display: inline-block;
    height:30px;
    width: auto;
    padding-left: 10px;
    border: 1px solid black;
}

.socialmediaBar a{
    text-decoration: none;
}

这是html：

<div class="socialmediaBar">

        <a href="mailto:jrossbeitzel@gmail.com"><img src="Images/Icons/envelope.png" height="30" width="30"/> </a> 
        <a href="http://www.facebook.com/ross.beitzel" target="_blank"><img src="Images/Icons/facebook.png" height="30" width="30" /> </a>
        <a href="http://www.twitter.com/jrossbeitzel" target="_blank"><img src="Images/Icons/twitter.png" height="30" width="30" /> </a>    
        <a href="https://vimeo.com/user35376371" target="_blank"><img src="Images/Icons/Vimeo.png" height="30" width="30" /> </a>
        <a href="https://www.linkedin.com/in/jamesrossbeitzel" target="_blank"><img src="Images/Icons/linkedin.png" height="30" width="30" /> </a>
 </div>

提前感谢你们给我的任何帮助！

Answer 1

您可以为图像设置容器：

<div class="container">
    <a href="mailto:jrossbeitzel@gmail.com">
        <img src="Images/Icons/envelope.png" height="30" width="30"/>
    </a> 
</div>

容器必须具有静态高度和宽度：

.socialmediaBar .container {
    height: 50px;
    width: 50px;
    float: left;
}

我做了Fiddle。它会破坏你的工具栏样式，但修复它应该没有问题。

Answer 2

您可以通过将链接固定为inline-block s和absolute内的图片来实现此目的。

.socialmediaBar a {
    display: inline-block;
    width: 30px;
    height: 30px;
    margin-right: 18px;
}

.socialmediaBar img {
    position: absolute;
    ...
}

这是我的jsfiddle。

这是我的第二个jsfiddle，用于向上动画。注意：这也可以通过css转换来完成。尝试删除整个javascript代码，并取消注释css中的两个注释。

使用Jquery在鼠标悬停时放大图像而不移动其他图像

2 个答案: