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

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

Other Posts
September, 21st 2020 Managing Line-breaks in Web Typography The Problem Good typography and copy requires a line-break management. Especially when the project you're working on is a multilingual website of 11 languages. But even in the world of different viewp..
March, 20th 2018 Using mobile hotspot with mobile operator that restricts tethering Time-to-live The main method for mobile operator to check if your are using other devices through mobile hotspot is TTL value of network packet. Every network packet has a number TTL (time-to-live) va..