使用jQuery将另一个div悬停时移动div

Question

When I hover a div at the bottom, which only is shown a little bit, (div has width:100%; ), I want this div to move up with a mouseovereffect, and the same time push the logo, which is in the center of the screen, upwards. 当我将div悬停在底部（仅显示一点）时（div的width:100%; ），我希望此div向上移动并具有mouseovereffect，同时按下徽标，该徽标位于屏幕中心向上。 I want to use jQuery, because nothing else works. 我想使用jQuery，因为其他方法均无效。 When the mouse is off the div, I want the div to fall back down to hiding. 当鼠标离开div时，我希望div回落以隐藏。 They are two div's inside the body. 它们是体内的两个div。

Here is parts of the html and css: code 这是html和css的一部分：代码

I hope someone knows how to make a javascript to make this hover function where hovering a div moves another div, then goes back to normal. 我希望有人知道如何制作JavaScript来实现此悬停功能，即悬停div会移动另一个div，然后恢复正常。

Answer 1

Does this help 这有帮助吗

using the jquery animate you can animate the movement of divs easily.. 使用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

There are few changes which need to be made in your code, 您的代码几乎不需要更改，

1) You have given class boks1 in jquery , but such class does not exist in your code. 1）您在jquery中给了class boks1 ，但是该类在您的代码中不存在。

2)you can combine both mouseover and mouseout in hover function itself. 2）你可以结合这两种mouseover和mouseout在hover功能本身。

Jquery jQuery的

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

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

Answer 3

Something like this should work (if I understand your question). 这样的事情应该起作用（如果我理解您的问题）。

I only changed the jQuery and one line of the CSS (the last line in .box was changed to transition: background 0.4s 0.5s, margin 0.4s; ). 我只更改了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

Here is my solution: 这是我的解决方案：

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

see Fiddle 见小提琴

For your information: Your code did not work because of typo in your jQuery selectors. 供您参考：由于jQuery选择器中的错字，您的代码无法正常工作。 I also mentions that you are using float left a certain time that makes no sense because you overrule it with other styles. 我还提到您在一定时间内使用左浮点数是没有意义的，因为您用其他样式取代了它。

I'm animating the top position because the margin will not do the right thing. 我正在设置最高位置的动画，因为空白处不会做正确的事。 When using margin the animation stops when there is no space. 使用边距时，动画将在没有空间的情况下停止。

I'm trigger the hover on the texarea becaus it covers the hole width. 我触发了在德克萨斯州的悬停，因为它覆盖了孔的宽度。 When using the .box itselfe then you will loose the focus during the hover effect. 使用.box本身时，您将在悬停效果期间失去焦点。 This will end up in a jumping effect. 这将最终产生跳跃效果。

I also us the stop function to clear the quehe otherwhise every hover event will be stored an triggerd (makes also an jumping effect) 我还使用了stop函数来清除其他事件，因为每个悬停事件都会存储一个触发事件（也会产生跳跃效果）

So my snippet may give you an idea of how to achieve your needs. 因此，我的代码片段可能会让您了解如何实现自己的需求。

使用jQuery将另一个div悬停时移动div

问题描述

4 个解决方案

解决方案1
3 2014-09-20 18:13:46

解决方案2
1 2014-09-20 18:24:12

解决方案3
0 2014-09-20 18:29:02

解决方案4
0 2014-09-20 18:31:26

使用jQuery将另一个div悬停时移动div

问题描述

4 个解决方案

解决方案1 3 2014-09-20 18:13:46

解决方案2 1 2014-09-20 18:24:12

解决方案3 0 2014-09-20 18:29:02

解决方案4 0 2014-09-20 18:31:26

解决方案1
3 2014-09-20 18:13:46

解决方案2
1 2014-09-20 18:24:12

解决方案3
0 2014-09-20 18:29:02

解决方案4
0 2014-09-20 18:31:26