Đã chọn Di chuột không có nền

Question

Tôi có một danh sách không có thứ tự.

Nếu tôi nhấp vào một mục, tôi thêm lớp đã chọn.

nên mục đã chọn luôn luôn là như

<li class="selected"> 

Đối với tất cả các mục li tôi sử dụng.

li:hover 
{ 
    background-color:#CECEC8; 
} 

Tác phẩm này hoạt động.

và cho các mục đã chọn tôi sử dụng

.selected 
{ 
    background-color:#8B8BFF; 
} 
.selected :hover 
{ 
    background-color:#8B8BFF; 
} 

Nhưng khi tôi nhấp vào mục lựa chọn và chuột vẫn còn nằm trên nó (vì vậy lơ lửng của nó trên nó) thay đổi màu dosnt nhưng vẫn là # CECEC8 từ li: di chuột thay vì # 8B8BFF từ.selected: hover.

Làm cách nào tôi có thể ghi đè lên li: di chuột khi được nhấp để màu nền của mục danh sách với class = được chọn luôn là # 8B8BFF ngay cả khi di chuột.

Sự cố hiện không hiển thị ngay lập tức nếu bạn nhấp vào, thay đổi màu dosnt từ di chuột thông thường.

Ví dụ

http://jsfiddle.net/FCGtc/1/

Answer 1

EDIT: Là giải pháp khác cho vấn đề trong fiddle bạn, tôi sẽ cung cấp cho bạn hai giải pháp, một cho mã trong câu hỏi và một cho Fiddle bạn

Mã trong câu hỏi:

có một khoảng trống giữa khai :hover của bạn , loại bỏ nó. Ngoài ra, đó là khoảng độ đặc hiệu. li:hover là cụ thể hơn hơn .selected:hover vì số li.

Sử dụng sau đây để giữ cùng một mức độ đặc hiệu:

li:hover 
{ 
    background-color:#CECEC8; 
} 

li.selected 
{ 
    background-color:#8B8BFF; 
} 

li.selected:hover 
{ 
    background-color:#8B8BFF; 
} 

DEMO: http://jsfiddle.net/FCGtc/8/

Mã trong Fiddle:

Đó là vì chọn di chuột ban đầu của bạn là một cụ thể hơn khớp với số so với công cụ chọn lớp học của bạn (cũng xóa khoảng trắng giữa :hover).

Sử dụng các, không cần cho rằng thần khủng khiếpimportant:

#browsecat li.selectedcat 
{ 
    background-color:#8B8BFF; 
} 

DEMO: http://jsfiddle.net/FCGtc/9/

Answer 2

Tôi nghĩ rằng bạn có hành vi này vì ID luôn có tính đặc hiệu cao tan class. Trong fiddle của bạn, nếu tôi thay đổi tất cả id thành class, nó hoạt động như bạn mong đợi.

Nếu bạn thích Star Wars, bạn có thể truy xuất thêm thông tin về độ đặc hiệu css here.

Hoặc, nếu không, đây là a serious one.

Answer 3

Bạn chỉ nên sử dụng:

#browsecat li:hover 
{ 
    background-color:#CECEC8; 
} 
#browsecat li.selectedcat 
{ 
    background-color:#8B8BFF; 
} 

Không cần phải sử dụng !important.

http://jsfiddle.net/8vYqM/

PS: Bạn nên tìm hiểu về css đặc hiệu: http://www.w3.org/TR/CSS2/cascade.html#specificity

Answer 4

để ghi đè lên: hover bạn cần phải cụ thể hơn, và sử dụng: hover

li.selected:hover { 
    background-color:#8B8BFF; 
}