show a span on hover of an element

I have 2 spans set up 开发者_StackOverflowin my HTML like this,

<span class="job_title">Job Title</span>
<span class="benefits">Benefits description</span>

I have hidden .benefits using display:none

When someone hovers over .job_title, I want to replace it with .benefits.

This is what I currently have, but it's not working.

$('.jobs_available li a').live('hover', function(){
                //alert('hello');
                $(this).closest(".jobs_available li a").next('.jobtitle').hide();
                $(this).next('.benefits').show();
            });

When hovering .job_title, you hide it so you don't hover over it anymore. That's a problem.

This will fix that:

<span class="hwrapper">
  <span class="job_title">Job Title</span>
  <span class="benefits">Benefits description</span>
</span>

<style>
.hwrapper .benefits { display: none; }
.hwrapper:hover .benefits { display: inline; }
.hwrapper:hover .job_title { display: inline; }
</style>

Without Javascript.

Element:hover works in IE7+. (In IE6 only A's have a CSS :hover state.)

Your closest statement is traveling up the dom to look for a .jobs_available li a, which would suggest that your .jobs_available li a lies within another .jobs_available li a. I think that should just be $(this).next('.jobtitle').hide()

it would also help to have more html to see where the .jobs_available li a is in relation to the other elements.