Pertanyaan CSS: not (): hover selector


<div class="parent">
    <div class="child">child1</div>
    <div class="child">child2</div>
    <div class="child">child3</div>
    <div class="child">child4</div>
    <div class="special">specialChild</div>
</div>

Saat melayang di atas salah satu .child elemen, saya ingin memberikan semua elemen anak .parent untuk mendapatkan warna latar belakang lain. Ini seharusnya tidak terjadi ketika melayang di atas .special elemen.

Apa yang saya coba sejauh ini:

.child {
    background-color: rgb(255,0,0);
}
.parent:not(.special):hover .child {
    background-color: rgb(0, 0, 255);
}

Tapi ketika melayang di atas .special elemen, warna latar belakang berubah (mengabaikan not() pemilih)

Apa yang saya rindukan?

JSFIDDLE: Link

EDIT: jQuery dapat digunakan sebagai solusi.


5
2018-03-02 13:09


asal


Jawaban:


Bungkus child elemen menjadi tambahan div dan berlaku untuknya aturan css, misalnya:

<div class="parent">
    <div class="children">
        <div class="child">child1</div>
        <div class="child">child2</div>
        <div class="child">child3</div>
        <div class="child">child4</div>
    </div>
    <div class="special">specialChild</div>
</div>

.children:hover .child {
    background: grey;
}

http://jsfiddle.net/UeZNB/1/


4
2018-03-02 13:37



Untuk membuat daftar barang lebih baik menggunakan tag yang sesuai.

Menggunakan <ul> tag bersama dengan <li> tag untuk membuat daftar yang tidak diurutkan.   - w3schools.com.   

<ul class="parent">
    <li class="child">child1</li>
    <li class="child">child2</li>
    <li class="child">child3</li>
    <li class="child">child4</li>
    <li class="special">specialChild</li>
</ul>

Kemudian jika Anda ingin meletakkan hover hanya pada item dengan kelas .child Anda perlu menentukan kelas elemen yang BUKAN elemen yang ditentukan untuk melayang-layang.

ul.parent li:hover:not(.special) {
    background-color: rgb(0, 0, 255);
}

jsFiddle

Anda tidak bisa menggunakan .parent:not(.special) karena dengan cara ini Anda memilih semua ul.parents kecuali ul.special (tetapi tidak ada orang tua dengan kelas itu). Cara yang benar adalah: .parent li:not(.special).


8
2018-03-02 14:17



Anda menggunakan not pemilih pada elemen induk, yang jelas tidak akan pernah memiliki kelas special, cara yang benar adalah:

.parent:hover > div:not(.special) {
  background: papayawhip;
}

Tetapi karena Anda menggunakan kelas, tidak akan lebih sederhana .parent:hover .child { ... }?

EDIT: mungkin saya salah mengerti pertanyaan, mungkin bisa ditanyakan lebih baik. Namun, seperti itu ini Anda mencoba untuk mencapainya?


2
2018-03-02 13:16



Anda dapat membuat posisi absolut div khusus, lalu menonaktifkan peristiwa penunjuk di atasnya.

   .child {
        background-color: red;
    }
    .parent:hover .child {
        background-color:blue;
    }
    .special
    {
        position: absolute;
        z-index:1;  
        pointer-events:none;
    }

BIOLA


1
2018-03-02 13:38



Solusi jQuery.

Buat kelas baru untuk keadaan mengambang yang Anda inginkan dan gunakan toggle toggleClass

JSFiddle

JQuery

(function($) {
    $('.child').hover(function() {
        $( ".child" ).siblings( ".child" ).toggleClass('hovered');
    });
})(jQuery);

0
2018-03-02 13:38