Saya mencoba menerapkan warna latar belakang saat mouse pengguna mengarahkan kursor ke elemen yang nama kelasnya adalah "reMode_hover".

Tetapi saya tidak ingin mengubah warna jika elemennya juga memiliki"reMode_selected"

Catatan: Saya hanya dapat menggunakan CSS, bukan javascript karena saya bekerja dalam lingkungan yang terbatas.

Untuk memperjelas, tujuan saya adalah mewarnai elemen pertama pada hover tetapi bukan elemen kedua.

HTML

<a href="" title="Design" class="reMode_design  reMode_hover">
    <span>Design</span>
</a>

<a href="" title="Design" 
 class="reMode_design  reMode_hover reMode_selected">
    <span>Design</span>
</a>

Saya mencoba di bawah ini dengan harapan definisi pertama akan berhasil tetapi ternyata tidak. Apa yang saya lakukan salah?

CSS

/* do not apply background-color so leave this empty */
.reMode_selected .reMode_hover:hover 
{
}

.reMode_hover:hover 
{
   background-color: #f0ac00;
}

Salah satu caranya adalah dengan menggunakan pemilih beberapa kelas (tidak ada spasi karena itu adalah pemilih turunan):

.reMode_hover:not(.reMode_selected):hover 
{
   background-color: #f0ac00;
}

<a href="" title="Design" class="reMode_design  reMode_hover">
    <span>Design</span>
</a>

<a href="" title="Design" 
 class="reMode_design  reMode_hover reMode_selected">
    <span>Design</span>
</a>

Di browser modern, Anda dapat melakukan:

.reMode_hover:not(.reMode_selected):hover{}

Lihat http://caniuse.com/css-sel3 untuk informasi kompatibilitas.

Metode 1

Masalah dengan kode Anda adalah Anda memilih .remode_hoveryang merupakan turunan dari .remode_selected. Jadi, bagian pertama agar kode Anda berfungsi dengan benar adalah dengan menghapus spasi itu

.reMode_selected.reMode_hover:hover

Kemudian, agar gaya tidak berfungsi, Anda harus mengganti gaya yang ditetapkan oleh :hover. Dengan kata lain, Anda perlu melawan background-colorproperti. Jadi kode terakhirnya adalah

.reMode_selected.reMode_hover:hover {
  background-color:inherit;
}
.reMode_hover:hover {
  background-color: #f0ac00;
}

Biola

Metode 2

Metode alternatif akan digunakan :not(), seperti yang dinyatakan oleh orang lain. Ini akan mengembalikan elemen apa pun yang tidak memiliki kelas atau properti yang dinyatakan di dalam tanda kurung. Dalam hal ini, Anda akan menaruhnya .remode_selecteddi sana. Ini akan menargetkan semua elemen yang tidak memiliki kelas.remode_selected

Biola

Namun, saya tidak akan merekomendasikan metode ini, karena fakta bahwa ini diperkenalkan di CSS3, jadi dukungan browser tidak ideal.

Metode 3

Metode ketiga adalah menggunakan jQuery. Anda dapat menargetkan .not()pemilih, yang mirip dengan penggunaan :not()di CSS, tetapi dengan dukungan browser yang jauh lebih baik

Biola