1

我在我的 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();
            });
4

2 回答 2

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's 有一个 CSS:hover状态。)

于 2011-04-24T13:10:08.867 回答
0

您最接近的说法是沿着 dom 查找 .jobs_available li a,这表明您的 .jobs_available li a 位于另一个 .jobs_available li a 中。我认为应该只是$(this).next('.jobtitle').hide()

拥有更多的 html 以查看 .jobs_available li a 与其他元素的关系也将有所帮助。

于 2011-04-24T12:04:29.520 回答