[Solved] Hide a div when hover another one

[Armannn]

Hello everyone!

I ran into a problem recently. I was working on an edit for my profile on a website and have done pretty much everything except for 1 thing – hiding a div when hover another one.

http://codepen.io/anon/pen/wKKjeP

As you may see in the link above, those 2 “hollywood lights” are animated, but I’d like to hide them when you hover one of those 4 tabs on right side (About, Stats etc.).

I was able to hide all other divs when hover one of the 4 tabs, but for some reason, I can’t do it with this one no matter what I try (be it display none, opacity 0 or something else).

Any possible idea/help?

[Armannn]

Hello!

Yes, it works perfectly. Wondering why it didn’t work when I tried literally the same way (actually, I tried both .tabs:hover and .tab:hover).

One more thing, which selector should I assign the “transition” property to (in order to make it a linear transition like it exists for the “Character” div)?

[Armannn]

I know that CSS is case-sensitive, but it still didn’t work correctly on my end when I was trying it (I guess I assigned the commands to wrong selectors).

Now I understand (the transitions part). Thanks a lot.

[Author]

Posts