Как показать класс с зависанием в 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: парения .two {видимость: видимый;}.

Я хочу показать. Два с JavaScript. Не могли бы вы помочь мне показать. Два раза, когда они парят. (Я хочу, чтобы один и тот же результат с JavaScript как с помощью .a:hover .two {visibility:visible;})

Answer 1

Я не знаю, почему вы хотите сделать это с помощью JS, когда это можно сделать с помощью CSS, но здесь вы идете:

CSS

.two {display:none;} 

JS

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

FIDDLE

// EDIT

Это был мой первоначальный ответ. Я изменил его, чтобы сократить код, но я его отправлю:

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

Answer 2

Сначала вы должны объявить в css.

.two {display:none;} 

после этого сделайте что-нибудь подобное.

<script> 
$(document).ready(function(){ 
    $(".a").hover(function(){ 
    $(this).find('> .two').css("display","block"); 
    },function(){ 
    $(this).find('> .two').css("display","none"); 
    }); 
}); 
</script> 

Answer 3

Проблема решена. Я использую Javascript:

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

Это предыдущий ответ от @ jmore009, прежде чем он редактировал свой последний ответ.