php – Hover effect using JQuery – Education Career Blog

Hey friends
i need to know how we can do the following?

like i am having the following links

client 1
client 2
client 3
client 4
client 5

while i place my mouse pointer over client 1 under the client 1,the following should be show as edit/Replace/Delete.same as client2,client 3,client 4.and client 5
how can we do this?

Update:

While i go through a Client 1 i need the hover as follows

Client 1 Edit
Replace
Delete
Client 2

how can i do that?

,

I created this demo


The Code Used:

$(function(){
  $('.dropdown').mouseenter(function(){
    $('.sublinks').stop(false, true).hide();
  
    var submenu = $(this).parent().next();

    submenu.css({
      position:'absolute',
      top: $(this).offset().top + $(this).height() + 'px',
      left: $(this).offset().left + 'px',
      zIndex:1000
    });
    
    submenu.stop().slideDown(300);
    
    submenu.mouseleave(function(){
      $(this).slideUp(300);
    });
  });
});

See the markup in example itself.

Note: If you are looking for panel menu, check it out on my blog:

Here is the demo of that:

Screenshot:

alt text

,

jQuery comes with a mouse event for hover: http://api.jquery.com/hover/. Just show the divs once the hover function is called.

Leave a Comment