1

How can I change the visibility of .section when I hover li element in my .base class?

<div class="div1">
    <ul class="base">
        <li>Hello World</li>
    </ul>

    <ul class="section">
        <li>Goodbye World</li>
    </ul>
</div>

I'm trying to understand the ampersand selector but I've not quite got it yet.

.div1 {
    > ul.base {
        > li {
            &:hover > & {
                & > .section {
                    visibility: visible;
                }
            }
        }
    }

    > ul.section {
        visibility: hidden;
    }
}

How can I do this?

user2722718
  • 163
  • 1
  • 2
  • 13

1 Answers1

3

& is a shorthand notation meaning "the composed selector at this point". Which means 

.div1 {
    > ul.base {
        > li {
            &:hover > & {
              ...

... translates into: 

|------- & --------|         |------- & --------|   
.div1 > ul.base > li:hover > .div1 > ul.base > li {
  ...

Also note & is actually implicit most of the time. But, in fact, it's not & which is implicit, but & + (space). That's why we use &:hover - to specify we don't want the space between composed and :hover.

Getting back to your request, you can't achieve what you want (modifying the sibling of the parent when the child is hovered). Not with CSS, nor with SCSS. It's only possible with JavaScript (because you can trigger anything from anywhere in JS). An that's because in CSS you don't have a parent selector. You can't go back on the selection chain from child to parent and then on to the parent's subsequent siblings.
See What do people mean when they say there's no parent selector? for a more in-depth explanation.

But you can modify the sibling of the parent when the parent is hovered (which is close enough):

.div {
  ul.base {
    &:hover + ul {
      visibility: hidden;
    }
  }
}

Or, even better: 

.div1 {
  ul {
    &.section {
      transition: opacity .35s ease-in-out;
    }
    &.base:hover + ul {
      opacity: 0;
    }
  }
}

Resulting in: 

.div1 ul.section {
  transition: opacity .35s ease-in-out; 
}
.div1 ul.base:hover + ul {
  opacity: 0;
}
<div class="div1">
    <ul class="base">
        <li>Hello World</li>
    </ul>
    <ul class="section">
        <li>Goodbye World</li>
    </ul>
</div>
tao
  • 82,996
  • 16
  • 114
  • 150
  • Interesting answer. Does this mean, however, that doing it on hover `li` (and not `ul`) is not possible? – user2722718 Sep 22 '19 at 19:44
  • It's not possible with CSS. Only with JavaScript. There is a possibility to do it with CSS, but not on `:hover`. Only on `click`, using `:target` selector. – tao Sep 22 '19 at 19:46
  • I will accept this answer. I can change the way I'm dealing with things so this method fits. Thank you. – user2722718 Sep 22 '19 at 19:47