CODEWITHSUNDEEP
jquerycss
Alex Zahir
Alex Zahir

Reputation: 969

jQuery show div on hover - hide div on mouseout

I have an anchor tag, which when hovered, I want a certain div ("mark") to show up. The div is NOT inside the anchor tag.

The HTML is as follows:

       <a href="#" class="mark"></a>
          <div class="icontent">
                <p>
                lorem ipsum dolor sit amet......
                 </p>
           </div>

When mouse is hovered on ".mark", ".icontent" should show up. When mouse is out, ".icontent" should hide again. Is it also possible to add a 1 second transition to it?

Thanks

Upvotes: 3

Views: 21477

Answers (6)

Zoltan Toth
Zoltan Toth

Reputation: 47685

$(".mark").on({
    mouseover: function() {
        $(".icontent").stop().show(1000);
    },

    mouseout: function() {
        $(".icontent").stop().hide(1000);
    }
})

DEMO

Upvotes: 3

Explosion Pills
Explosion Pills

Reputation: 191819

$(".mark").hover(function () {
   if (!$(".icontent").is(":animated")) {
      $(".icontent").show('slow');
   }
}, function () {
   $(".icontent").stop().hide('slow');
});​

You could also use mouseover and mouseout separately. The :animated and .stop additions are done to prevent wise guys from moving their mouse over and o ut of the anchor repeatedly.

Upvotes: 1

Addramyr
Addramyr

Reputation: 354

$(".mark").mouseover(function() {
    $('.icontent').fadeIn(1000);
}).mouseout(function(){
    $('.icontent').fadeOut(1000);
});

Upvotes: 0

dmi3y
dmi3y

Reputation: 3532

Here you are

HTML

<a href="#" class="mark">hover anchor</a>
<div class="icontent">
  <p>
    lorem ipsum dolor sit amet......
  </p>
</div>

JS

(function(){
  var del = 200;
  $('.icontent').hide().prev('a').hover(function(){
    $(this).next('.icontent').stop('fx', true).slideToggle(del);
  });
})();

Example http://jsbin.com/evehat/1/edit

Upvotes: 2

Brian Duncan
Brian Duncan

Reputation: 1186

hover() will work nicely here:

$('.mark').hover(function() {$('.icontent').show(1000)}, function() {$('.icontent').hide(1000)});

http://api.jquery.com/hover/

Upvotes: 5

ABC
ABC

Reputation: 718

$('.mark').hover(function()      {$('.icontent')).fadeIn(1000)},
function(){$('.icontent').fadeOut(1000)});

This should work :)

Upvotes: 0

Related Questions