Quick javascript hover question

Question

I have a quick JavaScript question. I was wondering if there's a way to make a div called #post li span to show up (appear) when you hover over the div "#post li" ? It'd mean a lot if someone could provide me with a code.

Answer 1

You can do that directly with CSS:

#post li span {
    display: none;
}

#post li:hover span {
    display: inline;
}

If you want to use JavaScript and have jQuery, you can use:

$('#post li span').hide();
$('#post li').hover(
    function() { $('span', $(this)).show(); },
    function() { $('span', $(this)).hide(); }
);

If you want to use JavaScript and don't have jQuery, things start getting more complicated.

Answer 2

In older IE's you won't have access to the :hover pseudo class on none anchor tags. so you can use javascript like this:

$('#post li').hover(function() {
    $(this).find('span').show();
  },
  function() {
    $(this).find('span').hide();
  }
);

check out jQuery hover for more info on how it works

Answer 3

You can use CSS.
Apply display: none to #post li span , then add display:block for #post li:hover span