Css ile :hover ve :not prosedure kullanımı

Css ile :hover ve :not prosedure kullanarak yapılan uygulama kodları paylaşılmaktadır.

Uygulama Önizleme

Html kodları

<div class="container">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
</div>

Css Kodları

.container:hover > :not(:hover) {
    opacity: 0.5;
}
.container {
    display: flex;
    gap: 1rem;
}
.box {
    width: 8rem;
    height: 8rem;
    border-radius: 1.5rem;
    background: orange;
    cursor: pointer;
    transition: opacity 0.5s ease;
}