CSS hover mô tả sự kiện có chuột đang ở trên phần tử HTML. Với thiết bị có màn hình cảm ứng thì sự kiện này là vô nghĩa. Đặt và giữ ngón tay trên phần tử HTML có thể đôi khi được hiểu là hover nhưng với safari trên iphone hay ipad thì hầu như không có tác dụng.
Thí dụ với CSS và HTML như sau:
<html>
<style type="text/css">
.test{
width: 100px;
background-color: #F00;
font-size: 40px;
}
.test:hover{
background-color: #0F0;
}
</style>
<body>
<div class="test">Gõ hay giữ ngón tay ở đây</div>
</body>
</html>
Trang HTML/CSS trên hiếm khi hoạt động với safari trên iphone/ipad. Nếu dùng browser khác có thể có hoạt động.
Giải pháp 1:
Tạo sự kiện click tại phần từ HTML và trang web hoạt động như ý muốn trên thiết bị có màn hình cảm ứng.
<div class="test" onclick="return true">Gõ ở đây</div>
Tuy nhiên cách này không trả lại tình trạng trước đó khi click lên phần tử khác (mouse out)
Giải pháp 2:
Sử dụng mô hình parent – child để parent kiểm soát tình trạng hover và không hover của child
<html>
<style type="text/css">
.child{
width: 100px;
background-color: #F00;
font-size: 40px;
}
.parent{
width: 200px;
border: 1px solid black;
}
//child không hover
.parent:hover .child {
background-color: #F00;
}
//child hover
.parent:hover .child:hover {
background-color: #0F0;
}
</style>
<body>
<div class="parent" onclick="">
<div class="child">Text Text Text</div>
</div>
</body>
</html>
Kết luận
- Nhờ sự kiện click được Safari nhận biết nên sự kiện hover được kích hoạt. Có thể thay click bằng bất cứ sự kiện chuột nào mà Safari nhận biết như mousedown, mouseup...
- Khai báo sự kiện click không cần có nội dung onclick=””
- Ngoài ra, sự kiện được lan truyền từ gốc đến các phần tử bên trên nên lý tưởng nhất là cài đặt sự kiện click cho phần tử body, khi đó các phần tử bên trên đều nhận biết sự kiện click. Tuy nhiên thực tế không phải vậy vì body đôi khi không truyền sự kiện (event) đến phần tử bên trên, và sự kiện được truyền đi càng gần, theo cấu trúc DOM, càng tốt.