How to change properties of another object on hover css

Question

I am currently trying to change the properties of another object in css but am not sure if I am doing this right. Any help would be appreciated.

ul.drop-menu {
  opacity: 0.1;
}

nav > ul > li:hover ~ ul.drop-menu {
  opacity: 1;
}

<nav>
    <ul>
        <li>Test
            <ul class="drop-menu">
                <li class="1">Test1</li>
                <li class="2">Test2</li>
                <li class="3">Test3</li>
                <li class="4">Test4</li>
                <li class="5">Test5</li>
                <li class="6">Test6</li>
                <li class="7">Test7</li>
            </ul>
        </li>
    </ul>
</nav>

That CSS won't work. `~` is a sibling selector, and a `li` can't be a sibling of a `ul`. Post your HTML too — Michael Coker, Apr 19 '17 at 21:03
check out [link](http://stackoverflow.com/questions/6910049/on-a-css-hover-event-can-i-change-another-divs-styling) — Pablo Escobar, Apr 19 '17 at 21:04
You're already using the immediate descendent/child selector (indicated by ` > ` ). What exactly are you expecting ` ~ ` to do in this context? Why not just use ` > ` again or just a space? — Joseph Marikle, Apr 19 '17 at 21:13

score 3 · Accepted Answer · answered Apr 19 '17 at 21:18

~ is a "general sibling selector", so it will match any element that is a sibling that comes after the element on the left side of the selector.

With your markup, you either just want to remove ~ to target any ul.drop-menu that is a child of li, or if you want the direct descendent, change it to a >. I'm assuming you want the latter, in case you nest multiple .drop-menu's in li's. I added another nested menu and changed your selector a little to demonstrate that.

ul.drop-menu {
  opacity: 0.1;
}

nav > ul li:hover > ul.drop-menu {
  opacity: 1;
}

<nav>
  <ul>
    <li>Test
      <ul class="drop-menu">
        <li class="1">Test1</li>
        <li class="2">Test2
          <ul class="drop-menu">
            <li class="1">Test1</li>
            <li class="2">Test2</li>
            <li class="3">Test3</li>
            <li class="4">Test4</li>
            <li class="5">Test5</li>
            <li class="6">Test6</li>
            <li class="7">Test7</li>
          </ul>
        </li>
        <li class="3">Test3</li>
        <li class="4">Test4</li>
        <li class="5">Test5</li>
        <li class="6">Test6</li>
        <li class="7">Test7</li>
      </ul>
    </li>
  </ul>
</nav>

Worked just like I wanted it to. I'm new to front-end dev and I'm not very good with css in general since I just jumped right into it. This won't happen if I take some time out of my day to look at things like this though. — alexo1001, Apr 19 '17 at 21:29
@alexo1001 word up. fwiw, `~` is a general sibling selector, and it's partner in crime is `+`, which is an adjacent sibling selector. Doesn't really apply to your answer, but if you're in a learning mood... https://developer.mozilla.org/en-US/docs/Web/CSS/Adjacent_sibling_selectors — Michael Coker, Apr 19 '17 at 21:33

score 1 · Answer 2 · answered Apr 19 '17 at 21:19

You have to use > instead of ~. Please check this:

ul.drop-menu {
  opacity: 0.1;
}

nav > ul > li:hover > ul.drop-menu {
  opacity: 1;
}

<nav>
    <ul>
        <li>Test
            <ul class="drop-menu">
                <li class="1">Test1</li>
                <li class="2">Test2</li>
                <li class="3">Test3</li>
                <li class="4">Test4</li>
                <li class="5">Test5</li>
                <li class="6">Test6</li>
                <li class="7">Test7</li>
            </ul>
        </li>
    </ul>
</nav>

Thanks for the answer. The other guy posted it first though so I selected his answer. — alexo1001, Apr 19 '17 at 21:28

How to change properties of another object on hover css

2 Answers2