显示元素悬停时的跨度

Question

我在我的HTML中设置了2个跨度，

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

我使用.benefits

隐藏了display:none

当有人在.job_title上方悬停时，我想将其替换为.benefits。

这就是我现在所拥有的，但它不起作用。

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

Answer 1

当悬停.job_title时，您隐藏它，这样就不会将鼠标悬停在它上面了。那是个问题。

这将解决这个问题：

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

没有Javascript。

Element:hover适用于IE7 +。 （在IE6中，只有A具有CSS :hover状态。）

Answer 2

你最近的声明正在向上移动，寻找一个.jobs_available li a，这表明你的.jobs_available li a位于另一个.jobs_available li a中。我认为应该只是$(this).next('.jobtitle').hide()

使用更多的html来查看.jobs_available li a与其他元素的关系也会有所帮助。