< Back to articles
February, 7th 2018
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..