Question

看看这段代码。当我悬停一个img时，所有的图像都会动画到顶部。我不想要这个。我希望如果我将鼠标悬停在其中任何一个上，只需将其设置为顶部动画。

<!DOCTYPE HTML>
<html>
<head>
    <title>Majid</title>
    <style>
        * {
            margin: 0 auto;
            padding: 0;
        }
        body {
            background: #333;
        }
        #box {
            width: 390px;
            height: 128px;
            margin-top: 300px;
            background: #555;
            position: relative;
overflow:hidden;
        }
#box a {
            width: 128px;
            height: 128px;
            float: left;
            margin: 0 1px;
        }
.icon img{position:relative;}
    </style>
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript">
 function icons(){
   $("a img") .animate({top: '-125px'});
 }
    </script>
</head>
<body>
    <div id="box">
        <a href="JavaScript:();" onmouseover="icons();" class="icon"><img src="images/fb.jpg"   alt="" /></a>
        <a href="JavaScript:();" onmouseover="icons();" class="icon"><img src="images/tt.jpg" alt="" /></a>
        <a href="JavaScript:();" onmouseover="icons();" class="icon "><img src="images/gp.jpg" alt="" /></a>
    </div>
</body>

Answer 1

将您的链接更改为：

<a href="#" class="icon"><img src="images/fb.jpg"   alt="" /></a>

你的jQuery：

$(document).ready(function () {
    $("a img").on('mouseover', function () {
        $(this).animate({
            top: '-125px'
        });
    });
});

确保将此jQuery包装在文档就绪处理程序中，或将其放在页面末尾。

Answer 2

试试这个：

添加以下CSS：

#box a {
    transition: top 0.4s ease;
}
#box a:hover {
    top: -125px;
}

现在删除所有JavaScript / jQuery / onmouseover事件。

动画属性而不动画其他属性

2 个答案: