除了懸停的元素之外，如何設置相同類型的所有元素的樣式？

Question

我想為一行設置四列的樣式，以將懸停后的不透明度更改為 0.5，但實際懸停的列的不透明度仍應為 1，因此基本上每個列都設置了樣式，但懸停的列。

我嘗試過類似的東西：

div.airsuspension-submenu div.row div:hover .nav-highlight:not(div.airsuspension-submenu div.row div .nav-highlight:hover) {
    opacity: 0.5;
}

所有懸停的div.row div元素的不透明度應為 0.5，但懸停的div.row div.nav-highlight的不透明度仍應為 1

Answer 1

在沒有 javascript 的情況下執行此操作的最佳選擇是將背景顏色應用於父容器，然后將父容器的 hover 上的不透明度降低到所有子容器，然后增加懸停在其上的特定元素的不透明度。

 .d-flex { display: flex; justify-content: space-around; }.d-flex:hover > div { opacity: 0.5; }.d-flex:hover > div:hover { opacity: 1; }.item { background: red; flex-grow: 1; padding: 1rem; transition: opacity 1s ease-in-out; color: white; }

 <div class="d-flex"> <div class="item">item 1</div> <div class="item">item 2</div> <div class="item">item 3</div> <div class="item">item 4</div> </div>