在元素悬停时显示跨度

Question

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

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

我使用display:none隐藏了.benefits

当有人将鼠标悬停在.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

您最近的陈述是在dom上查找.jobs_available li a，这表明您的.jobs_available li a位于另一个.jobs_available li a中。 我认为应该只是$(this).next('.jobtitle').hide()

还有更多的html可以查看.jobs_available li a与其他元素的相对位置。