Question

I would like to toggle a hidden element within a list of posts when it is hovered. Similar to twitter, when you hover over a post, a menu of links will become unhidden.

Each row of posts has a class “post”. Here is my current code:

$("div.post").mouseover(function() {
 $(this).css("background-color", "#f9f9f9");
});
$("div.post").mouseleave(function() {
 $(this).css("background-color", "white");
});

Each row has a span class within it called “menu”.

How do I go about toggling the span “menu” on and off for the hovered post?

Answer 1

A simple chain modification to original code:

$("div.post").mouseover(function() {
       $(this).css("background-color", "#f9f9f9").find('span.menu').stop(true,true).slideUp();
}).mouseleave(function() {
       $(this).css("background-color", "white").find('span.menu').stop(true,true).slideDown();
});

Can change slide effect to toggle() for both and will hidde/show with no effect. The stop() will prevent jumpiness for quick in-out-in with mouse