CODEWITHSUNDEEP
csssass
Harry
Harry

Reputation: 31

Sass/Css Can I set multiple classes in hover action?

I would like to set some sibling classes in on hover action and I do it this way:

.div-inside-1:hover ~ .div-inside-tran-1{
  left: 0px;
  top: 0px;
  opacity: 0%;
}
.div-inside-1:hover ~ .div-inside-tran-1::after{
  background-color: rgba(0,0,0, .1);
}

Can I do it without copying and pasting the .div-inside-1:hover? One more thing is that how to set properties in ::after by hover in other class? Thank you very much!

Edited: Please refer to https://jsfiddle.net/k6ws0j9t/

Upvotes: 0

Views: 437

Answers (1)

Awais
Awais

Reputation: 4902

Yes You can do in Sass like this

.div-inside-1 {
  &:hover {
    ~ .div-inside-tran-1 {
      left: 0px;
      top: 0px;
      opacity: 0%;

      &::after {
        background-color: rgba(0,0,0, .1);
      }
    }
  }
}

Setting properties of ::after pseudo code on hover of some else class like this

.class{
    &hover{
      .class2{
        &::after{
          content:'';
          background: none;//Your properties
        }
      }
    }
  }

Remember this can be done only if relation is parent child class, you cant target parent by child trough css for that you need JavaScript

Upvotes: 1

Related Questions