Question

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

Answer 1

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