在元素悬停时显示跨度

发布于 2024-11-03 03:04:12 字数 600 浏览 2 评论 0原文

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

原文

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();
            });

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

无所谓啦 2024-11-10 03:04:12

将鼠标悬停在 .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 状态。）

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

回复收藏 0 原文