当我将一个 div 悬停在底部时,它只显示了一点点,(div 有 width:100%;
),我希望这个 div 通过鼠标悬停效果向上移动,并且同时将屏幕中央的标志向上推。我想使用 jQuery,因为没有其他方法。当鼠标离开 div 时,我希望 div 回退到隐藏状态。它们是体内的两个 div。
这是部分 html 和 css:code
我希望有人知道如何制作一个 javascript 来实现悬停功能,悬停一个 div 会移动另一个 div,然后恢复正常。
最佳答案
这有帮助吗
使用 jquery animate
,您可以轻松地为 div 的移动设置动画。
<div id="box1"></div>
<div id="box2"></div>
<style type="text/css">
#box1
{
width: 100px;
height: 100px;
background-color: red;
}
#box2
{
width: 100px;
height: 100px;
background-color: yellow;
margin-top: 10px;
}
</style>
<script type="text/javascript">
$("#box1").hover(function(){
//alert("hover");
$("#box2").animate({marginLeft: "200"});
});
$("#box1").mouseleave(function(){
$("#box2").animate({marginLeft: "0"});
});
</script>
关于javascript - 使用 jquery 将另一个 div 悬停时移动 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25951702/