CODEWITHSUNDEEP
javascriptjqueryhtmlcss
bob
bob

Reputation: 135

jQuery - mouseover() / fadeIn() not working

http://jsfiddle.net/rR6gC/

I am trying to display information inside a bar whenever somebody pushes their mouse over each bar, but it's not working at all. I was able to make it react from pure CSS, but when trying to use jQuery function, nothing worked.

JavaScript / jQuery

$('.score').mouseover(function () {
    $(this).fadeIn('slow');
});
$('.score').mouseeleave(function () {
    $(this).fadeOut('slow');
});

CSS

.score{
color:white;
font-size:2em;
width:100%;
text-align:center;
display:inline-block;
position:relative;
}

Upvotes: 0

Views: 171

Answers (1)

Arun P Johny
Arun P Johny

Reputation: 388316

From what I can understand you want to hide 5 and show it when mouse is over the bar

  1. There was a typo in mouseeleave
  2. You need to write the mouseenter and mouseleave event for the bar wrapper element and then show/hide the score element within it when mouse enters/leaves

Try

$('.scoreWrap2 .score').hide()
$('.scoreWrap2').mouseover(function () {
    $(this).find('.score').stop(true, true).fadeIn('slow');
});
$('.scoreWrap2').mouseleave(function () {
    $(this).find('.score').stop(true, true).fadeOut('slow');
});

Demo: Fiddle

Upvotes: 3

Related Questions