Chặn sự kiện hover
chào các bạn, các bạn cho mình hỏi có phương thức nào trong Css để ngăn chặn một sự kiện hover theo ý mình được không. Cụ thể là thế này :
Giả sử mình có 2 vùng A và B như hình ảnh.
Mình muốn khi hover vào vùng A thì bg của nó màu red, khi hover vào vùng B thì bg của nó màu blue.
Tuy nhiên mình lại muốn nếu sự kiện của A xảy ra trước thì sự kiện của B sẽ không xảy ra nữa.
Cụ thể là khi rê chuột từ bên trái vào --> tức là sự kiện A xảy ra trước thì chỉ xảy ra mỗi sự kiện A thôi và sự kiện B bị ngăn chặn cho dù mình có đưa con chuột quá sang vùng B . Tương tự nếu hover từ bên phải qua thì sẽ chỉ xảy ra sự kiện với B mà không xảy ra sự kiện với A mặc cho con chỏ chuột bị đưa quá sang vùng A.
Mọi người có thể thấy yêu cầu hơi vô lý nhưng ở đây là mình chỉ đưa ra ví dụ đơn giản vậy chứ mình đang áp dụng nó để làm một cái khác.
Cám ơn mọi người !
Mình nghi có lẽ bạn phải dùng JavaScript để xác định được chuột nó từ bênh trái vào hay ngược lại chứ, Css mình nghĩ hơi khó
Cám ơn bạn đã phản hồi lại bài của mình, nếu Css không có cách nào làm được thì chắc phải dùng đến Js rồi. Hi vọng nhận thêm được nhiều ý kiến đóng góp khác nữa ạ
Bạn thử xem cách này được không nghe :
https://jsfiddle.net/6323y57p/2/