Control :hover a flexbox item

@sibertMay 04.2019

This is an attempt to do a top navbar using flexbox. It seems that this could be done in a simpler way:

https://jsfiddle.net/vnLzku0q/2/

1. How can I ensure that the three first items not change color when hovered?

2. Is there a better way to do this?

to post a comment

@SempervivumMay 04.2019 — #How can I ensure that the three first items not change color when hovered?[/quote]The easiest way is assigning a class to the elements to be hovered.
Is there a better way to do this?[/quote]Fine so far. I guess that the purpose of the empty container is to arrange the first two items to the left and the other ones to the right. This can also be achieved by applying margin-right:auto to the logo container. No auxiliary container needed.

This link shows some advanced techniques of arranging flex items:

https://stackoverflow.com/questions/32551291/in-css-flexbox-why-are-there-no-justify-items-and-justify-self-properties/33856609#33856609

Modified fiddle:

https://jsfiddle.net/Sempervivum/yLo0n9v1/6/

@sibertauthorMay 05.2019 — #Brilliant! Thank you!

But can I omit the "> div" when I am using a class?

.flex-container > div.logo {

Like this:

.flex-container .logo {

It seems to work without the divs

https://jsfiddle.net/0y46bfpw/

@SempervivumMay 05.2019 — #Yes, you can, "div" is not that important in that context.

@sibertauthorMay 05.2019 — #Is there any way to inherit the background-color from picture when hovering?

https://jsfiddle.net/kut5v2os/1/

Like hovering the image but darker.

@SempervivumMay 05.2019 — #I'm not shure what kind of effect you intend to achieve. At the right (about and magnifier) the image is very dark and a background darker would not be visible. One can simulate such effect by applying a black background and a low opacity:

https://jsfiddle.net/Sempervivum/jtf1anrz/1/

(Start and blog)

Control :hover a flexbox item

5 Comments(s) _↴

Also in #CSS _↴

Success!

Social

Version

Control :hover a flexbox item

5 Comments(s) ↴

Also in #CSS ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

5 Comments(s) _↴

Also in #CSS _↴