CODEWITHSUNDEEP
csshover
Adam Bell
Adam Bell

Reputation: 1045

Can't get div to have an opacity of 1 when hovering over another div

I've got a site I'm building using Oxygen Builder for WordPress to display a mega menu over the regular menu (https://www.extremeactionsports.org). It's positioned correctly. and when I use the following CSS, the opacity goes to zero, as it should.

#menu-sports {
  opacity: 0;
  pointer-events: initial;
  transform: translateY(2px);
}

All good there, but now I have another link that what should happen is when you hover over it, the mega menu appears. Code is as follows:

HTML

<a id="link-sports" class="ct-link-text atomic-header-4-link link-sports" href="#" target="_self"   link-sports="1">EXTRMSports</a>

CSS

a.link-sports:hover + #menu-sports {opacity: 1;}

Should be so simple but just not working for me. Any ideas why and what the fix is?

Should mention I did try the CSS without the + but nothing different.

Upvotes: 0

Views: 102

Answers (2)

A Haworth
A Haworth

Reputation: 36426

The + selector is very specific, selecting the adacent sibling. The space cominator will select descendants.

So, assuming that the #menu is placed somewhere below the a (anchor) element but is not a child of it you are probably looking for the general sibling selector ~.

#menu-sports {
  opacity: 0;
  pointer-events: initial;
  transform: translateY(2px);
}

a.link-sports:hover ~ #menu-sports {opacity: 1;}
<a id="link-sports" class="ct-link-text atomic-header-4-link link-sports" href="#" target="_self"   link-sports="1">EXTRMSports</a>
<div id="menu-sports">Here's a menu of sports</div>

Note: sibling means they must have the same parent. If you alter the snippet to have a + combinator it will work in this instance because SO snippet system adds in the body element which becomes the common parent and there is no other element between the two.

Upvotes: 1

Brebber
Brebber

Reputation: 3054

Seems, you mixed up Classes and IDs:

Your link is labled with an ID:
<a id="link-sports" ...

But in your rule you to try to adress the link by an class rule:
a.link-sports:hover ...

You may try:

a#link-sports:hover + #menu-sports {opacity: 1;}

... if the rule really matches the HTML structure (elements #menu-sports is direct following sibling after element .link-sports) it should work.

Upvotes: 1

Related Questions