Tôi đã nhìn thấy các câu trả lời đề xuất chỉ display:none trên css :hover. Nhưng điều đó làm cho div nhấp nháy khi chuột di chuyển.Làm thế nào để làm cho một div biến mất khi di chuột mà không có nó nhấp nháy khi chuột di chuyển?
EDIT: Thêm jsfiddle
display:none sẽ mất phần tử ra khỏi cây làm, vì vậy nó sẽ mất :hover nhà nước ngay lập tức, sau đó lại xuất hiện và được :hover một lần nữa, biến mất, lại xuất hiện, vv ...
gì bạn cần là:
#elem { opacity:0; filter:alpha(opacity=0); }
Nó sẽ rời khỏi nơi này trống rỗng, vì vậy không nhấp nháy sẽ xuất hiện. (Demohoặcyours updated)
Tất cả ba ví dụ (hiển thị, hiển thị, độ mờ): http://jsfiddle.net/userdude/VvsG2/4/ –
Nếu bạn có một cái gì đó như thế này:
div:hover
{
display:none;
}
Sau đó, không có cách nào để bạn có thể tránh nhấp nháy. Bật: di chuột qua phần tử trở nên vô hình để nó không bị lơ lửng nữa và nó xuất hiện trở lại. Ngay sau khi nó xuất hiện nó đang nhận được: di chuột một lần nữa và ...
Bật: di chuột trở thành phần tử vô hình để nó không bị lơ lửng nữa và nó xuất hiện trở lại. Ngay sau khi nó xuất hiện nó đang nhận được: di chuột một lần nữa và ...
Bật: di chuột trở thành phần tử vô hình để nó không bị lơ lửng nữa và nó xuất hiện trở lại. Ngay sau khi nó xuất hiện nó đang nhận được: di chuột một lần nữa và ...
Bật: di chuột trở thành phần tử vô hình để nó không bị lơ lửng nữa và nó xuất hiện trở lại. Ngay sau khi nó xuất hiện nó đang nhận được: di chuột một lần nữa và ...
Bật: di chuột trở thành phần tử vô hình để nó không bị lơ lửng nữa và nó xuất hiện trở lại. Ngay sau khi nó xuất hiện, hãy di chuột trở lại và ...
... Nó nhấp nháy ngắn. Một lựa chọn tốt hơn sẽ được sử dụng làm mờ, một cái gì đó như thế này:
div:hover
{
opacity:0;
}
Tùy chọn với CSS3, nhưng sẽ chỉ làm việc trên các trình duyệt mới nhất (trừ IE). Chỉnh sửa: Dưới đây là ví dụ @jsfiddle sử dụng cả jquery và CSS3.
<html>
<head>
<title>CSS3 hover</title>
<style type="text/css">
#hover{
width:100px;
height:100px;
background-color:#000000;
-webkit-transition:opacity 0.2s ease;
-moz-transition:opacity 0.2s ease;
-o-transition:opacity 0.2s ease;
}
#hover:hover{
// Red(0-255), Blue(0-255), Green(0-255), Alpha (0-1)
background-color:rgba(100,100,100,0);
opacity:0;
}
</style>
</head>
<body>
<div id="hover"></div>
</body>
</html>
Sử dụng javascript để đặt lớp (ví dụ: ẩn) trên đối tượng khi di chuột qua. Sau đó sử dụng css để hiển thị: none khi đối tượng có lớp vô hình đó. Vì nó không còn tồn tại nữa, bạn sẽ phải kiểm tra các tọa độ chuột (hoặc sử dụng một sự kiện di chuột qua phần tử khác) để loại bỏ lớp và thiết lập lại lớp vô hình.
Vui lòng đăng html và css chính xác đang cung cấp cho bạn sự cố này và tốt nhất nên đặt nó trong http://jsfiddle.net/ –
bạn có đồng ý với việc sử dụng jQuery không? –
Đây là một ví dụ: http: // jsfiddle.net/userdude/VvsG2/ –