Hover child target nested element

Question

I'm building a horizontal navigation, split in 5 items. The 3th item will be the website's logo. I want to create a hover effect on the other items and target the logo. Is there any pure css solution for hovering .main-nav-item and targetting .logo ?

The html:

<nav class="main-nav close-nav">
  <ul id="menu" class="main-nav-list">
    <li class="main-nav-item"></li>
    <li class="main-nav-item"></li>
    <li>
      <a href="">
        <div id="main-nav-home" class="main-nav-home">
          <span class="main-nav-title"></span>
          <span class="main-nav-subtitle"></span>
          <div class="main-nav-logo">
            <div class="logo">
          </div>
        </div>
        </div>
      </a>
    </li>
    <li class="main-nav-item"></li>
    <li class="main-nav-item"></li>
  </ul>
</nav>

Thanks in advance !

There is a `flexbox` solution but it's not really flexible/scalable and requires adjusting the HTML. It really depends on what "effect" you are after. Other than that, just hovering the parent as mentioned in the answer below would seem to be optimal...but as I said.. *it depends*. — Paulie_D, Nov 25 '15 at 16:38
@Pauli_D thank you for your quick reply ! I will check on the 'flexbox' solution, which I haven't used / tried. The solution below is not what I need because I need different styles on the logo **per** list item. — Matthias, Nov 25 '15 at 16:44
@Paulie_D Thanks again, I will experiment on that one, and keep you informed ! — Matthias, Nov 25 '15 at 17:20
Possible duplicate of [Is there a CSS parent selector?](http://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector) — TylerH, Nov 26 '15 at 02:33
Hi Paulie_D, I tried the flexbox solution and had it working, but as you mentioned, it was very dificult managing the scaling. So eventually, I wrote a script, that was less time consuming ... Thanks for your help anyway, you gave me some very good insight ! — Matthias, Nov 27 '15 at 16:50

score 1 · Answer 1 · answered Nov 25 '15 at 16:22

1

use .parent-class:hover .target-child: { ... }

Refer to live example code or follow css code.

nav {
  background-color: gray;
}

.main-nav-item:hover {
  color: red;
}

.main-nav:hover .logo {
  color: blue;
}

answered Nov 25 '15 at 16:22

aluc

1,136
9
16

score 0 · Accepted Answer · answered Nov 25 '15 at 17:10

As I mentioned in the comments by restructuring the menu and taking advantage of flexbox and order we can place the logo at the end of the menu but visually have it appear in the middle.

As the last child can be selected by reference to any previous sibling we can achieve the effect the OP is looking for and have each previous sibling affect the last child differently.

FWIW:

nav {
  text-align: center;
}
ul {
  list-style-type: none;
  display: inline-flex;
}
a {
  text-decoration: none;
  padding: 1em;
  color: #000;
  font-weight: bold;
  border: 1px solid green;
}
li {
  order: 3
}
li:nth-child(1),
li:nth-child(2) {
  order: 1;
}
.logo {
  order: 2;
}
.logo a {
  background: lightblue;
}
.logo:hover a {
  background: plum;
}
li:nth-child(1):hover ~ .logo a {
  background: lightgreen;
}
li:nth-child(2):hover ~ .logo a {
  background: green;
}
li:nth-child(3):hover ~ .logo a {
  background: red;
}
li:nth-child(4):hover ~ .logo a {
  background: grey
}

<nav role='navigation'>
  <ul>
    <li><a href="#">Home</a>
    </li>
    <li><a href="#">About</a>
    </li>
    <li><a href="#">Clients</a>
    </li>
    <li><a href="#">Contact Us</a>
    </li>
    <li class="logo"><a href="#">Logo</a>
    </li>
  </ul>
</nav>

Note: Obviously this solution is somewhat inflexible and would not scale well but the option is there.

Hover child target nested element

2 Answers2