Scss: Parent Hover Selector

SCSS: parent hover selector

If I understand your question correctly: https://jsfiddle.net/wx9L9jzj/3/

SCSS:

.parent {
  width: 200px;
  height: 200px;
}

.children {
  height: 100px;
  width: 100px;
  
  .is-active & {
    background: red;
  }
  
  :hover > & {
    background: blue;
  }
}

Note the :hover > & SCSS selector that essentially looks at the parent node to determine if the child was within a :hover pseudo-class. This is not standard CSS and requires the SASS syntax to be compiled to standard CSS, which SASS does by rewriting the selector.

Per SASS documentation on the parent (&) selector:

The parent selector, &, is a special selector invented by Sass that’s used in nested selectors to refer to the outer selector. It makes it possible to re-use the outer selector in more complex ways, like adding a pseudo-class or adding a selector before the parent.

When a parent selector is used in an inner selector, it’s replaced with the corresponding outer selector. This happens instead of the normal nesting behavior.

Sass parent selector and hover?

If I understand it right, here is my interpretation of the DOM interaction you're describing.

.parent

• .child1

• .child2

A hover on .child1 affects .child2

If yeah, then here:

.form-control {
    ... //your CSS for this
    input {
        //CSS for input
        &:hover ~ .input-group-addon {
            //CSS for .input-group-addon when input is hovered
        }
    }
}

OR, if .input-group-addon is right after input (adjacent sibling), then you could use the following:

.form-control {
    ... //your CSS for this
    input {
        //CSS for input
        &:hover + .input-group-addon {
            //CSS for .input-group-addon when input is hovered
        }
    }
}

As @Martin suggested.

Scss parent selector, hover and active

Your :hover and :active selectors are related to li element. You should put these rules to a section.

nav {
  max-width:100%;
  background: lightblue;

  ul{
    background: yellow;

    li {
      background: yellow;
      text-align: center;

      a { // <a> starts here
        color: red;
        display: inline-block;

        &:hover { 
          background: linear-gradient(to top, green 4px, transparent 0); 
        }

        &:active { 
          background: linear-gradient(to top, green 4px, transparent 0); 
        }
      } // and ends here
    }
  }
}

SCSS Change Parent Z-Index on Hover

Your selector is targeting a sidemenu inside a menuitem - not the parent, I guess you want.

.sidemenu .menudiv:hover .sidemenu { .... }

<div class="sidemenu">
  <div class="menuitem">
    <div class="sidemenu">
    </div>  
  </div>
</div>

In CSS it is not possible to change the styling of a parent item from a child - why you must add the hover state to the sidemenu

.sidemenu {
  z-index: 5;
  &:hover { z-index: 6; }
}

However, (please note this is a bit hackish) if you only want the z-index to change if you are hovering the sidebar above a nested menuitem you can use pointer-events to disable click/hover interaction on the sidemenu itself and then re-enable it on menuitems only.

.sidemenu {
  z-index: 5;
  pointer-events: none;
  &:hover { z-index: 6; }

  .menuitem {
    pointer-events: auto;
  }
}

Now you are still looking for hover on the sidebar - but it will only work if the mouse is at a position where pointer-events are not disabled (the nested menuitem).

SCSS: Change visibility of another child of parent

& 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>

SASS / SCSS hover when using &__* syntax to reach parent selector

.button {
   $root: &;

   &__icon {
       color: green;
   }

   &:hover #{$root}__icon {
       color: red;
   }
}

or

.button {
   $root: &;

   &__icon {
       color: green;

       #{$root}:hover & {
           color: red;
       }
   }
}

---

Related Topics