显示元素悬停时的跨度

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

来源

2011-04-24 sea_1987

您需要提供更多的html。你的'jobs_available'，李和主播在哪里？ – Damb 2011-04-24 12:00:53

从逻辑上讲，这是行不通的，因为当你显示'.benefits'（并且隐藏'.job_title'）时，你不会再徘徊'.job_title'，这会改变视图，这将会悬停'。 job_title'，这将改变回查等等等等等等等等。 – Rudie 2011-04-24 13:06:06

你最接近的语句向上行进DOM来寻找一个.jobs_available李一，这将表明您.jobs_available李一所在的另一个.jobs_available李一之内。我认为这应该只是$(this).next('.jobtitle').hide()

它也将有助于有更多的html来查看.jobs_available li a与其他元素的关系。

来源

2011-04-24 12:04:29 derek

当您悬停.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状态。）

来源

2011-04-24 13:10:08 Rudie

我相信IE一路高达9不认可悬停，活跃，或专注于除最右边的选择器之外的任何东西。 – RobW 2012-06-04 17:00:36

在IE8（我的首选浏览器！）中工作正常：http://jsfiddle.net/rudiedirkx/SBFCN/show/ – Rudie 2012-06-04 22:09:22

显示元素悬停时的跨度

回答

相关问题