CODEWITHSUNDEEP
jquerycssopacity
MeltingDog
MeltingDog

Reputation: 15490

Jquery: opacity change on hover not working

I have a div that is set to opacity:0.7. I want to make it appear 100% opaque on hover over so I created:

.fullopaque {
opacity: 1;
}

("#menu DIV").hover(
  function () {
    $(this).addClass('fullopaque');
  },
  function () {
   $(this).removeClass('fullopaque');
  }
);

I can see in my console that the new class is added to the div, but nothing changes visually.

.fullopaque is set below the divs style in my CSS so that shouldnt be an issue either.

Is there anything I have done wrong? I cant seem to find out why.

Upvotes: 0

Views: 556

Answers (4)

Andrew Liu
Andrew Liu

Reputation: 2548

#menu DIV:hover{
 opacity: 1;
}

If css works, I would not try javascript

Upvotes: 0

Mehdi Karamosly
Mehdi Karamosly

Reputation: 5438

try the below :

$("#menu DIV").hover(
  function () {
    $(this).css({ opacity: 1 });
  },
  function () {
   $(this).css({ opacity: 0.7 });
  }
);

This is the jsfiddle

Upvotes: 1

wheresmycookie
wheresmycookie

Reputation: 773

Why not just change the CSS to:

#menu:hover {
  opacity: 100%;
}

Upvotes: 0

Ian Clark
Ian Clark

Reputation: 9357

Presumably you're running into this situation

<div class='seventypercent fullyopaque'></div>

So you have two classes (really, two style declarations - will mention later) attached to the element which are both supposed to apply their rules, but in this case they conflict. CSS will use some sort of hierarchy to work calculate which rules should take precedence, and in this case, it's the 70% opacity. In your example, I'd imagine you're other selector is #menu div, which is more specific, and thus will take precedence (CSS specificity can be complicated)

There are a couple of ways to get around this. Firstly, where is the need for jQuery, why not simply do:

#menu div:hover { opacity:1; }

Failing that, you'll need to amend your CSS so that your fully opaque class takes precedence. You could do this like so:

#menu div.fullopaque { opacity:1; }

Upvotes: 1

Related Questions