在元素悬停时显示跨度

Question

I have 2 spans set up in 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();
            });

Answer 1

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.)

Answer 2

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.