Chrome sẽ không áp dụng css phong cách di chuột khi nút chuột trái được tổ chức xuống

Question

Trong Google Chrome, tình trạng di chuột CSS không được kích hoạt khi nút chuột trái được tổ chức xuống, như thể hiện ở đây:

a:hover { 
 
    color: red; 
 
}

<a href="http://www.jsfiddle.net">words</a>

http://jsfiddle.net/RHGG6/1/

vấn đề này không xảy ra ở một trong hai FF8 hoặc IE9. Đó là vấn đề bởi vì tôi đang thực hiện một hành động kéo và thả và sử dụng CSS để làm nổi bật mục tiêu thả. Tôi có thể làm điều này khá đáng kể trong JavaScript, nhưng điều đó có vẻ nặng nề cho những gì cơ bản là một vấn đề CSS. Có cách nào để giải quyết vấn đề này không?

Answer 1

Liên kết chuyển sang màu đỏ khi tôi di chuột qua nó bằng Chrome 17.0.948.0 (Nhà phát triển Build 111321) Ubuntu 10.04, vì vậy, bạn có thể muốn cập nhật Chrome của mình. Trên một lưu ý có liên quan, lớp giả hover: áp dụng cho một phần tử bị HOVERED trỏ chuột. Để áp dụng kiểu trong khi nút chuột được giữ trong khi nhấp vào liên kết, hãy sử dụng lớp giả: hoạt động. Tôi không chắc chắn tại sao FF và IE hoạt động khác nhau.

Answer 2

Khi bạn nhấn nút chuột trái, phần tử có phải ở trạng thái hoạt động không? Sự khác biệt ở đây là Firefox và IE đang cho phép trạng thái hoạt động được kế thừa từ trạng thái di chuột và Chrome thì không. Trong CSS, trạng thái hoạt động có thể được điều khiển bằng cách sử dụng lớp giả: active. Bạn cần đặt rõ ràng kiểu cho trạng thái hoạt động để đảm bảo tính nhất quán giữa các trình duyệt.

Answer 3

Tôi cũng đã kiểm tra trong Safari và Opera và chúng hoạt động giống như IE9 và Firefox. Có vẻ như Chrome là trình duyệt duy nhất hoạt động theo cách này. Cách duy nhất tôi có thể có được hành vi mong muốn là sử dụng Javascript. Những gợi ý với: lớp giả hoạt động chắc chắn không hoạt động, tôi nghĩ rằng họ hiểu sai vấn đề. Kỳ lạ thay,: di chuột trong Chrome hoạt động khi nút chuột phải đang được giữ và không phải khi nút trái. Đi con số.

Answer 4

Bạn đang tìm kiếm: lớp giả hoạt động. : hover sẽ chỉ kích hoạt khi nút được di chuột qua. : hoạt động sẽ chỉ kích hoạt khi nút đã được chọn hoặc được nhấp vào.

Đây là jsFiddle: http://jsfiddle.net/RHGG6/21/

Answer 5

Từ một sân chơi nhỏ xung quanh, có vẻ như Chrome 30.0.1599.69 m trên windows7 không tạo ra một sự kiện mouseenter nếu nút trái được tiến hành khi di chuyển trên một phần tử. Như vậy, dựa vào sự kiện onmouseenter cho kết quả tương tự như sử dụng css - có lẽ sự kiện này (không kích hoạt) được sử dụng để báo hiệu cho css engine rằng một cái gì đó cần phải thay đổi.

Nhưng dù sao, bạn chỉ có thể thêm mã để xử lý sự kiện mousemove và mouseout. Tôi chỉ đơn giản là thiết lập màu văn bản với js, mặc dù một cái gì đó mà toggled một lớp có lẽ sẽ là một lựa chọn tốt hơn. Ít nhất các js sẽ được sử dụng thời gian mà css nên đã được sử dụng, do đó, nó sẽ không phải tất cả được trên cao, mặc dù nó suck redoing nó tất cả bất cứ lúc nào di chuyển chuột.

Có lẽ bạn có thể sử dụng removeEventListener từ bên trong trình xử lý mà bạn đang cố gắng xóa. Nếu vậy, bạn có thể đính kèm các js để xử lý các sự kiện với addEventListener, gắn vào cả hai sự kiện khi tải trang. Khi sự kiện onmousemove được kích hoạt, bạn có thể thay đổi kiểu và sau đó loại bỏ trình xử lý. Sau đó, khi sự kiện mouseout được kích hoạt, bạn có thể khôi phục kiểu và gắn lại trình xử lý onmove. Tôi sẽ không ngạc nhiên nếu cố gắng loại bỏ một người xử lý từ một sự kiện, từ bên trong bộ xử lý sẽ thất bại, nhưng người ta chỉ có thể thử.Nó sẽ chỉ thêm một vài byte vào js, ​​nhưng sẽ cải thiện hiệu quả (về mặt liên kết chứ không phải toàn bộ trang) - từ khả năng rất nghèo nếu chuột được di chuyển qua liên kết rất nhiều đến 100% - tức là kiểu được đặt chính xác một lần và xóa chính xác một lần cho mỗi chu kỳ nhập/rời.

<a href="http://www.jsfiddle.net" onmousemove = "this.style.color='red'" onmouseout = "this.style.color=''">words</a> 

Làm việc cho tôi - Lưu ý: chỉ được thử nghiệm với chrome trong win7.