Tôi đang cố gắng áp dụng màu nền khi chuột người dùng di chuột vào phần tử có tên lớp "reMode_hover".

Nhưng tôi không muốn đổi màu nếu phần tử cũng có"reMode_selected"

Lưu ý: Tôi chỉ có thể sử dụng CSS chứ không phải javascript vì tôi đang làm việc trong một số loại môi trường hạn chế.

Để làm rõ, mục tiêu của tôi là tô màu cho phần tử đầu tiên khi di chuột chứ không phải phần tử thứ hai.

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>

Tôi đã thử dưới đây với hy vọng định nghĩa đầu tiên sẽ hoạt động nhưng không được. Tôi đang làm gì sai?

CSS

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

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

Một cách là sử dụng bộ chọn nhiều lớp (không có khoảng trắng vì đó là bộ chọn con cháu):

.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>

Trong các trình duyệt hiện đại, bạn có thể làm:

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

Tham khảo http://caniuse.com/css-sel3 để biết thông tin tương thích.

Phương pháp 1

Vấn đề với mã của bạn là bạn đang chọn .remode_hoverđó là một hậu duệ của .remode_selected. Vì vậy, phần đầu tiên để mã của bạn hoạt động chính xác là bằng cách xóa khoảng trống đó

.reMode_selected.reMode_hover:hover

Sau đó, để có được kiểu không hoạt động, bạn phải ghi đè kiểu được đặt bởi :hover. Nói cách khác, bạn cần phải truy cập background-colortài sản. Vì vậy, mã cuối cùng sẽ là

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

Vĩ cầm

Cách 2

Một phương pháp thay thế sẽ là sử dụng :not(), như đã nêu của những người khác. Điều này sẽ trả về bất kỳ phần tử nào không có lớp hoặc thuộc tính được nêu trong dấu ngoặc đơn. Trong trường hợp này, bạn sẽ đặt .remode_selectedở đó. Điều này sẽ nhắm mục tiêu tất cả các yếu tố không có một lớp.remode_selected

Vĩ cầm

Tuy nhiên, tôi sẽ không đề xuất phương pháp này, vì thực tế là nó đã được giới thiệu trong CSS3, vì vậy hỗ trợ trình duyệt không lý tưởng.

Phương pháp 3

Phương pháp thứ ba sẽ là sử dụng jQuery. Bạn có thể nhắm mục tiêu .not()bộ chọn, tương tự như sử dụng :not()trong CSS, nhưng với sự hỗ trợ trình duyệt tốt hơn nhiều

Vĩ cầm