javascript - 如何在 Javascript 中显示悬停类？

Question

我有一个案例:

HTML:

<div class="a b">
    <span class="one">Success ONE</span>
    <span class="two">ONE</span>
</div>

<div class="a b">
    <span class="one">Success TWO</span>
    <span class="two">TWO</span>    
</div>

我想显示默认隐藏的.two。如果我使用 CSS，我可以使用:

.two {visibility:hidden;}
.a:hover .two {visibility:visible;}

它在使用 CSS 时效果很好，但在我的例子中，我必须注释标记这个 css .a:hover .two {visibility:visible;}。

我想用 JavaScript 显示 .two。你能帮我在悬停.a 类时显示.two 吗？ (我希望使用 JavaScript 获得相同的结果，例如使用 .a:hover .two {visibility:visible;})

Answer 1

我不确定你为什么要用 JS 来做这件事，而它可以用 CSS 来做，但是你去吧:

CSS

.two {display:none;}

JS

$(".a").hover(function(){
   $(this).find(".two").toggle();
});

FIDDLE

//编辑

这是我原来的回答。我更改了它以缩短代码，但我会重新发布它:

$(".a").hover(function(){     
    $(this).find(".two").css({"visibility":"visible"}); 
}, function(){     
    $(this).find(".two").css({"visibility":"hidden"}); 
});