Css 4 min läsning
CSS-trick: välja och ändra syskonelement vid hover
Du kan styla elementen före och efter det som hovras utan en rad JavaScript - :has() plus den generella syskonkombinatorn är allt som behövs.
- css
- selectors
- frontend
Har du någonsin undrat hur man väljer och ändrar stilarna på föregående och nästa syskonelement när ett av elementen hovras? Att använda JavaScript är förvisso ett alternativ, men visste du att du kan uppnå samma effekt med ren CSS?
Anta att vi har följande element:
<div>
<a>1</a><a>2</a><a>3</a><a>4</a><a>5</a>
</div>Och CSS-regeln är:
a { color: #f55; }Nu kommer den intressanta delen. Jag använder selektorn :has() tillsammans med den generella syskonkombinatorn ~ för att träffa de föregående syskonelementen - de före a:hover - och jag använder ~ a för att välja nästa syskonelement när något av <a>-elementen hovras. Den kombinationen av selektorer låter oss exakt välja och styla de önskade elementen utifrån hover-tillståndet.
a:has(~ a:hover),
a:hover ~ a {
color: #000;
}