Back to articles
February, 7th 2018

CSS :not pseudo-class together with :hover usage

Recently at Masterhost.ru, I saw a quite common example of :hover behavior in a row of blocks. When user hovers one of the blocks, dim all but hovered one.

:not

That was implemented in JS and reminded me that it could be written in a plain CSS. Guess you would be surprised that :not supports :hover as an argument. So this is valid CSS:

/* css */
.blocks {
    display: flex;
    justify-content: space-between;
}
.blocks > div {
    width: 22%; 
    height: 200px; 
    background: gray;
}
.blocks:hover > div:not(:hover) {
    opacity: .6;
}

Other Posts
July, 28th 2022 Background-aware swiper pagination Some parts of user interface are not background aware, however are meant to be. It’s especially noticeable when working with user-generated content that is different in colors, exposure and size. Take..
March, 31st 2022 Tree-shaking Vuex State in Nuxt Document response The way Nuxt delivers state data from server to client can play a bad joke with your loading performance. All of your Vuex state data on the server will be printed in the response Document as JS objec..