Đặt một: hover dựa trên lớp

Question

Tôi có HTML sau:

<div class="menu"> 
    <a class="main-nav-item" href="home">home</a> 
    <a class="main-nav-item-current" href="business">business</a> 
    <a class="main-nav-item" href="about-me">about me</a> 
</div> 

Trong CSS, tôi muốn thiết lập các a:hover cho những mục menu để một màu cụ thể. Vì vậy, tôi viết:

.menu a:hover 
{ 
    color:#DDD; 
} 

Nhưng, tôi muốn thiết lập a:hover màu này chỉ dành cho những <a> thẻ với lớp chính-nav-item và không phải là chính-nav-item-hiện, bởi vì nó có màu khác và không được thay đổi khi di chuột. Tất cả các thẻ <a> trong menu div sẽ thay đổi màu khi di chuột ngoại trừ một màu với lớp hiện tại.

Tôi làm cách nào để sử dụng CSS?

tôi đã cố gắng một cái gì đó giống như

.menu a:hover .main-nav-item 
{ 
    color:#DDD; 
} 

nghĩ rằng chỉ có những người thân với lớp học chính-nav-item sẽ thay đổi màu sắc trên di chuột, và không phải là hiện tại. Nhưng nó không hoạt động.

Answer 1

Hãy thử điều này:

.menu a.main-nav-item:hover { } 

Để hiểu được cách làm việc này điều quan trọng là để đọc cách trình duyệt không. a xác định phần tử, .main-nav-itemđủ điều kiện thành phần chỉ cho những phần tử có lớp đó và cuối cùng là loại psuedo-class :hover được áp dụng cho biểu thức đủ điều kiện xuất hiện trước đó.

Về cơ bản nó nắm này:

Áp dụng quy tắc di chuột này cho tất cả các yếu tố neo với lớp main-nav-item đó là một đứa trẻ hậu duệ của bất kỳ phần tử với lớp menu.

Answer 2

Cascading đang cắn bạn. Hãy thử điều này:

.menu > .main-nav-item:hover 
    { 
     color:#DDD; 
    } 

Mã này nói để lấy tất cả các liên kết mà có một lớp học của chính-nav-item VÀ là con của menu lớp, và áp dụng cáC#DDD màu khi họ đang bay lượn.

Answer 3

Một lỗi phổ biến là để lại dấu cách trước tên lớp. Ngay cả khi đây là cú pháp chính xác:

nó sẽ không bao giờ hoạt động.

Vì vậy, bạn sẽ không viết

.menu a .main-nav-item:hover 

nó sẽ là

.menu a.main-nav-item:hover 

Answer 4

thế nào về .main-nav-item:hover

này giữ cho độ đặc hiệu thấp

Answer 5

bạn chỉ có thể thử:

a.main-nav-item:hover { }