Css: pilih semua adik beradik menggunakan not()

Pasukan UX kami mahu saya membuat menu navigasi yang meredupkan item yang lain dan bukannya menyerlahkan item yang dilegar.

CSS untuk menyelamatkan!

Penyelesaian agak mudah apabila menggunakan CSS not() pseudo-class:

HTML

<div class="menu-items">
  <div>Home</div>
  <div>About</div>
  <div>Contact</div>
  <div>Services</div>
  <div>Blog</div>
  <div>Portfolio</div>
</div>

SCSS

Saya telah mengalih keluar sifat penggayaan supaya kita boleh fokus pada fungsi sebenar:

1 .menu-items {    
2     visibility: hidden;
3 
4     & > * {
5         visibility: visible;
6         transition: opacity 500ms;
7     }
8 
9     &:hover > :not(:hover) {
10        opacity: 0.45;
11    }
12 }

Kami mempunyai bekas dengan kelas .menu-item.
Dalam baris #4, kami memilih semua elemen anaknya dan menambahkan peralihan animasi kelegapan padanya.

Barisan #9 mengendalikan kesan lekukan pada elemen dengan menetapkan kelegapan semua elemen tidak dilegar menggunakan not() pseudo-class kepada nilai yang lebih rendah.

Dan apakah yang berlaku dengan sifat keterlihatan?
Kami menetapkan keterlihatan bekas .menu-item kepada tersembunyi dan kemudian menetapkan semula elemen anak kepada kelihatan. Ini menyebabkan kesan dimatikan apabila kita melayang di antara elemen.

Itu sahaja :)

Atas ialah kandungan terperinci Css: pilih semua adik beradik menggunakan not(). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!