1

我正在尝试制作一个工具栏，当您将鼠标悬停在它上面时，每个图像都会放大。但是，我只希望您所在的图标成为移动的图标。就像我现在的代码一样，整行都发生了变化。

这是我正在使用的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>

提前感谢您能给我的任何帮助！

4

2 回答 2

0

您可以为图像设置一个容器：

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

我做了一个小提琴。它会破坏您的工具栏样式，但修复它应该没有问题。

于 2015-01-25T11:09:29.360 回答
0

您可以通过使链接固定大小inline-blocks 和里面的图像来做到这一点absolute。

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

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

这是我的jsfiddle。

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

于 2015-01-25T11:11:06.807 回答