CODEWITHSUNDEEP
jqueryhtmlhovermouse
user2178586
user2178586

Reputation: 141

How to make a div move down if mouse hovers over it jQuery

I'm trying to make a <div> that will glide down when the persons mouse hovers over it. I believe this would be jQuery which I have little experience with.

Thanks for any help in advance!

Upvotes: 0

Views: 6911

Answers (3)

anurag619
anurag619

Reputation: 712

A little hover that moves an div up/down can be easily done in CSS. Here’s one example:

HTML:

<div class="product">
<p> Product Info </p>

</div>

CSS:

.product {
border: 2px solid #999;
padding: 20px;
display: inline-block;
}
.product:hover {
transform: translateY(-15px); /* edit X/Y as per requirements */
}

body {
padding: 50px;
}

Woking example: http://jsfiddle.net/pEBw5/

Upvotes: 0

j__m
j__m

Reputation: 9625

#example:hover
{
  position: relative; margin-top: 40px;
  animation-name: slide-down; animation-duration: 2s;
}

@keyframes slide-down
{
  from { margin-top: 0px; } to { margin-top: 40px; }
}

Fiddle includes the downlevel (-moz and -webkit) styles. http://jsfiddle.net/b7Hqj/

Upvotes: 1

Joseph Lennox
Joseph Lennox

Reputation: 3249

$(".your-div").mouseover(function() {
    $(this).animate({ marginTop: 300 });
})

Upvotes: 2

Related Questions