Question

当我在底部悬停一个div时，只显示一点，（div有width:100%;），我希望这个div以鼠标效果向上移动，同时推动徽标，位于屏幕中央，向上。我想使用jQuery，因为没有其他工作。当鼠标离开div时，我希望div回落到隐藏状态。它们是身体内的两个部分。

以下是html和css的一部分：code

我希望有人知道如何制作一个javascript来实现这个悬停功能，其中悬停div移动另一个div，然后恢复正常。

Answer 1

这有用吗

使用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>

Answer 2

您的代码中需要进行一些更改，

1）你在jquery中给了class boks1，但你的代码中不存在这样的类。

2）您可以在mouseover函数本身中同时使用mouseout和hover。

<强> Jquery的

$(document).ready(function () {
    $(".box1").hover(function () { // on hover

        $(".box").css("margin-top", "-20px");
    },function() {//on mouseout
            $(".box").css("margin-top", "20px");
  });
});

Answer 3

这样的事情应该有用（如果我理解你的问题）。

我只更改了jQuery和CSS的一行（.box中的最后一行更改为transition: background 0.4s 0.5s, margin 0.4s;）。

$(document).ready(function () {
    $(".textarea").hover(
        function () {
            $(this).height($(this).height() + 200);
            $(".box").css("margin-top", "-200px");
        },
        function () {
            $(this).height($(this).height() - 200);
            $(".box").css("margin-top", "");
        }
    );
});

@charset "UTF-8";
/* CSS Document */

html {
	background: url(bilder/backnormal.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

body {
	margin: 0;
	padding: 0;
}


.textarea {
	background: rgba(255,255,255,0.5);
	width: 100%;
	float: left;	
	position: relative;
	-webkit-transition: all 0.3s linear;
	-moz-transition: all 0.3s linear;
	-ms-transition: all 0.3s linear;
	-o-transition: all 0.3s linear;
	transition: all 0.3s linear;
}


.box1, .box2 {
	color: #666;
	height: 57%;
	margin-top: 0px;
	margin-bottom: 0px;
	margin-right: 0px;
	text-align: left;
	padding-left: 350px;
	
	transition: background-color 0.5s ease-in-out;
	float: left;
	
}

.box1:hover, .box2:hover {
	background: rgba(255,255,255,0.2);
transition: background-color 0.5s ease-in-out;

}

/*________*/

.box {
	width: 300px;
	height: 400px;
	position: relative;
	background: rgba(255,255,255,0);
	display: inline-block;
	float: left;

	margin-top: 10%;
	margin-bottom: 10%;
	margin-left: 35%;
	margin-right: 35%;
	cursor: default;
	text-align: center;
	-webkit-transition: background 0.4s 0.5s;
	transition: background 0.4s 0.5s, margin 0.4s;
}
 
.box:hover {
    background: rgba(255,255,255,0.2);
    -webkit-transition-delay: 0s;
    transition-delay: 0s;
}

.logo {
	width: 90%;
	padding-top: 20%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<body>


<div class="menu">
</div>      
    
<div class="box">
   		 
   		 <img src="bilder/logouten.png" class="logo" />
</div>
    
<div class="textarea">
    		<div class="box1">
        		<h1>hello</h1>
        		<p>textexttextextextextexttextextxtxtexetxtextextextetex</p>
			</div>
            <div class="box2">
                <h1>hello again</h1>
                <ul>
                    <li>textext</li>
        
                    <li>haethaethaethaefgae</li>
        
                    <li>wordswordswords</li>
                </ul>
			</div>
</div>

<footer>
</footer>
    


</body>

</html>

Answer 4

这是我的解决方案：

$(".textarea").hover(
    function () {
        $('.textarea, .box').stop().animate({top: '-200px'});
    }, function (){
        $('.textarea, .box').stop().animate({top: '0'});        
});

请参阅Fiddle

供您参考：由于jQuery选择器中的拼写错误，您的代码无效。我还提到你使用浮动离开一段时间是没有意义的，因为你用其他风格否决了它。

我设置了顶部位置的动画，因为边距不会做正确的事情。使用边距时，动画会在没有空格时停止。

我在texarea上触发悬停，因为它覆盖了孔宽。使用.box itselfe时，您将在悬停效果期间失去焦点。这将最终产生跳跃效应。

我也使用停止功能来清除其他每个悬停事件都会被触发（也会产生跳跃效果）

因此，我的代码段可能会让您了解如何满足您的需求。

使用jquery悬停另一个div时移动div

4 个答案: