Pertanyaan Apakah: tidak (: hover) dan: mengarahkan cara aman untuk menyembunyikan elemen yang dapat diakses?


Terkadang tampak bermanfaat untuk membuat elemen halaman tertentu hanya terlihat pada misalnya melayang. Contohnya adalah "umpan balik" - Apakah posting ini bermanfaat bagi Anda? "- widget. Karena elemen-elemen itu mungkin sangat penting untuk antarmuka, fitur show-on-hover-seperti itu harus merupakan peningkatan progresif atau, dalam istilah lain, tidak mengganggu dan menurun secara anggun.

Cara yang biasa tampaknya menggunakan javascript, mis. menyembunyikan elemen dan membuatnya tersedia ketika elemen induk melayang. Alasan untuk pilihan itu mungkin :hover tidak mendukung untuk semua elemen terutama di browser warisan, sehingga melarang Anda untuk menyembunyikan elemen di tempat pertama hingga css2. (untuk contoh js / jQuery cf. jquery menampilkan elemen di hover)

Saya ingin tahu apakah Anda dapat mencapai fitur tersebut dengan aman * dengan css3 murni, menggunakan :not(:hover) dan :hover, tidak memengaruhi browser lama. Sejauh yang saya lihat, persyaratannya adalah setiap browser yang mendukung :not() harus mendukung :hover untuk semua elemen. Menurut sumber-sumber berikut, yang tampaknya menjadi kasus

Contoh implementasi: http://jsfiddle.net/LGQMJ/

Apa yang kamu pikirkan? Keberatan atau sumber lain?

* dengan aman, maksud saya peramban harus selalu menampilkan semua elemen sebagai pilihan terakhir.


32
2018-03-16 12:12


asal


Jawaban:


Solusi Anda terlihat baik-baik saja untuk CSS3. Tidak ada yang bisa saya pikirkan untuk meningkatkan solusi Anda untuk browser modern sebagai opacity properti tidak akan pernah diterapkan oleh browser yang tidak mendukungnya.

Tidak ada browser lain selain IE6 dan NN4 (dan lebih tua) tanpa dukungan untuk :hover pada elemen selain a. Seperti tersirat dalam pertanyaan Anda, semua browser yang mendukung :not() diketahui juga sepenuhnya mendukung :hover.

Yang mengatakan, Anda akhirnya meninggalkan IE7 dan IE8 kehilangan efek mengambang, yang terakhir yang masih cukup lazim. Anda mungkin ingin mendukung IE6 juga, tetapi inilah solusi yang saya yakini akan mengatasi masalah ini, jika Anda memerlukannya:

  1. Menghilangkan :not(:hover) semuanya jadi pemilih pertama Anda menjadi kurang spesifik daripada sama spesifik untuk pemilih kedua Anda dengan :hover, dan Anda dapat menjangkau IE7 dan IE8 yang tidak mendukung :not() tetapi lakukan dukungan :hover pada semua elemen visual:

    div span.question {
        opacity: 0;
    }
    div:hover span.question {
        opacity: 1;
    }
    
  2. Menggunakan visibility properti, bukan opacity properti untuk menjangkau IE7 dan IE8 yang tidak mendukung CSS3 opacity:

    div span.question {
        visibility: hidden;
    }
    div:hover span.question {
        visibility: visible;
    }
    

    Ingat itu visibility: hidden akan membuat elemen tidak terlihat ke mouseovers juga, tetapi dalam kasus ini Anda menerapkannya ke elemen anak, sehingga orang tua akan tetap terlihat dengan mouseovers.

  3. Gunakan kombinator CSS2 / 3 yang IE6 tidak mendukung tetapi IE7 dan IE8 lakukan (anak >, saudara kandung yang berdekatan +, saudara kandung umum ~) untuk menyembunyikan kedua aturan dari IE6. Ini berbatasan dengan "hacky", tetapi situasi Anda adalah tempat di mana anak kombinator >sangat cocok, sehingga dapat diintegrasikan secara organik daripada diretas seperti yang terkenal html > body menyaring:

    div > span.question {
        visibility: hidden;
    }
    div:hover > span.question {
        visibility: visible;
    }
    

Diperbarui biola


21
2018-03-16 12:28