CODEWITHSUNDEEP
jquerycss
Nilzone-
Nilzone-

Reputation: 2786

Opacity doesn't get set on hover

I have a basic dropdown menu. When I hover over the different menu-choices, It's supposed to set opacity: 1. It's starting at .5.

Here's the hover-part of my jQuery:

$('#cat1 > li > a').hover(function () {
    $(this).css({
        color: '#dc692e', opacity: 1
    });
}, function () {
    $(this).css({
        color: '#fff', opacity: .5
    });
});

Here is the full fiddle: http://jsfiddle.net/Nilzone/HnmHh/

Thanks for your help!

Upvotes: 0

Views: 124

Answers (2)

Bhushan Kawadkar
Bhushan Kawadkar

Reputation: 28523

you can use animate to change the opacity.

$('#cat1 > li > a').hover(function () {
    $(this).animate({opacity: 1}, 500);
});

Upvotes: 0

nnnnnn
nnnnnn

Reputation: 150080

Using $('#cat1 > li > a').hover(... doesn't work because at the time that that code runs the a elements don't actually exist yet. You need to either run that code immediately after appending those elements (within the $.getJSON() callback), or use a delegated event handler on an element that exists initially:

$('#cat1').on({
    mouseenter : function () {
      $(this).css({
        color: '#dc692e', opacity: 1
      });
    },
    mouseleave : function () {
      $(this).css({
        color: '#fff', opacity: .5
      });
    }
},'li > a');

Demo: http://jsfiddle.net/HnmHh/11/

The selector 'li > a' passed as a separate parameter to .on() is tested each time the events occur, so the handlers work on dynamically added elements.

You wouldn't have this problem if you used CSS for this instead, because CSS rules will apply to dynamically added elements.

Upvotes: 1

Related Questions