CODEWITHSUNDEEP
javascriptjqueryhtmlcss
bennysantoso
bennysantoso

Reputation: 1213

How to show class with hovering in Javascript?

I have a case :

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>

I want to show .two which the default is hidden. If I use CSS, I can use :

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

It works well when using CSS, but in my case, I have to comment tag this css .a:hover .two {visibility:visible;}.

I want to show .two with JavaScript. Could you help me to show .two when hovering .a class? (I want the same result with JavaScript like using .a:hover .two {visibility:visible;})

Upvotes: 0

Views: 1910

Answers (3)

jmore009
jmore009

Reputation: 12923

I'm not sure why you want to do this with JS when it can be done with CSS but here you go:

CSS

.two {display:none;}

JS

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

FIDDLE

// EDIT

This was my original answer. I changed it to shorten the code but I will repost it:

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

Upvotes: 4

Hope
Hope

Reputation: 644

First you have to declare in the css.

.two {display:none;}

after that do something like this.

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

Upvotes: 1

bennysantoso
bennysantoso

Reputation: 1213

Problem is solved. I'm using Javascript :

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

This is the previous answer from @jmore009 before he was editing his last answer.

Upvotes: 0

Related Questions