hover in sass code example

Example 1: onhover sass

&:hover
	//activates on hover

Example 2: scss hover

.class {
    margin:20px;
    &:hover {
        color:yellow;
    }
}

Example 3: scss hover

.button {
    &:hover {
      opacity: 1;
    }
    &:active {
      position: relative;
      top: 7px;
      box-shadow: none;
    }
}

Example 4: sass & selector

.alert {
  // The parent selector can be used to add pseudo-classes to the outer
  // selector.
  &:hover {
    font-weight: bold;
  }

  // It can also be used to style the outer selector in a certain context, such
  // as a body set to use a right-to-left language.
  [dir=rtl] & {
    margin-left: 0;
    margin-right: 10px;
  }

  // You can even use it as an argument to pseudo-class selectors.
  :not(&) {
    opacity: 0.8;
  }
}

Tags:

Css Example