Move div when hovering another div with jquery
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. I want to use jQuery, because nothing else works. When the mouse is off the div, I want the div to fall back down to hiding. They are two div's inside the body.
Here is parts of the html and css: code
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.
4 answers
solution1
3 2014-09-20 18:13:46
Does this help
using the jquery animate you can animate the movement of divs easily..
<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>
solution2
1 2014-09-20 18:24:12
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.
2)you can combine both mouseover and mouseout in hover function itself.
Jquery
$(document).ready(function () {
$(".box1").hover(function () { // on hover
$(".box").css("margin-top", "-20px");
},function() {//on mouseout
$(".box").css("margin-top", "20px");
});
});
solution3
0 2014-09-20 18:29:02
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; ).
$(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>
solution4
0 2014-09-20 18:31:26
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. 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. 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)
So my snippet may give you an idea of how to achieve your needs.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.