Di chuột qua phần tử ẩn để hiển thị nó

Question

Có cách nào để di chuột qua phần tử đã bị ẩn hay không. Tôi đang cố gắng bắt chước những gì Steam làm với điều hướng mũi tên trên trang chủ của họ. Bạn sẽ nhận thấy rằng khi bạn lần đầu tiên được đến trang web, không có mũi tên cho thấy:

Sau đó, khi bạn di chuột qua các khu vực có phải là một mũi tên, nó cho thấy bản thân:

Tôi đã thử đặt các div có chứa hình ảnh mũi tên thành display: none và cũng đã thử visibility: hidden nhưng dường như không hoạt động với các phương pháp di chuột hoặc di chuột qua trong jQuery. Tôi đã có thể nghĩ rằng visibility: hidden sẽ làm cho nó hoạt động, nhưng điều đó dường như không phải là trường hợp. Có cách nào khác để tôi có thể ẩn các div này ngay từ đầu nhưng vẫn có thể có các sự kiện di chuột hoạt động trên chúng không?

Answer 1

Set nó về không opacity thay vì:

$('#blah').hover(function() { 
    $(this).fadeTo(1,1); 
},function() { 
    $(this).fadeTo(1,0); 
}); 

http://jsfiddle.net/mblase75/bzaax/

Answer 2

Sử dụng phương thức jQuery .fadeTo để thay đổi độ mờ của phần tử trên trạng thái di chuột.

Các trang web jQuery chứa một ví dụ nhưng một cái gì đó như thế này là đủ

$("element").hover(//On Hover Callback 
        function() {$(this).fadeOut(100);} , 
        //Off Hover Callback 
        function() {$(this).fadeIn(500);}) 

Từ trang jQuery Hover.

Answer 3

Bạn có thể đặt thành opacity: 0.

Để làm cho trình duyệt chéo bạn có thể muốn làm điều đó với jQuery tho.

Answer 4

Một cách để làm điều này là sử dụng div kiểm tra lượt truy cập thay thế, sao cho nó không có nội dung, nhưng khi di chuột qua nó sẽ hiển thị div "mũi tên". Khi "mũi tên" div (hoặc div thử nghiệm lần truy cập) bị thoát thì div "mũi tên" sẽ bị ẩn một lần nữa.

Hoặc, bạn có thể sử dụng cùng một div cho thử nghiệm lần truy cập và "mũi tên", sao cho hình nền được sử dụng cho các yếu tố hình ảnh của div. Khi lơ lửng, bạn có thể hướng dẫn bù đắp của ảnh được đặt thành vị trí hiển thị "mũi tên". Khi thoát, bạn sẽ đặt độ lệch của nền thành vị trí mà hình ảnh mũi tên sẽ không còn được hiển thị nữa.

Và cuối cùng, nếu nội dung sẽ luôn ở cùng vị trí với vùng thử nghiệm hit, bạn có thể đặt độ mờ của div thành 0 và chuyển đổi tương ứng.

Answer 5

Bạn có thể thiết lập độ mờ đục của các yếu tố đến 0. Điều đó sẽ cho phép họ nhận được sự kiện di chuột (trên thực tế MouseEnter và MouseLeave), nhưng là một vấn đề thực tế, làm cho chúng vô hình đối với người dùng.

Answer 6

Bạn không thể di chuột qua phần tử ẩn hoặc phần tử chưa được hiển thị. Bạn có thể di chuột qua phần tử hiển thị và sau đó sử dụng phần tử đó để hiển thị phần tử ẩn khác trước đó. Hoặc bạn có thể di chuột qua một phần tử trong suốt và làm cho nó mờ đục.

Here is an example of the opacity technique using just CSS, it would also work with jQuery's hover.

CSS:

#it { 
    opacity: 0; 
    width: 500px; 
    height:500px; 
} 

#it:hover { 
    opacity: 1; 
} 

Here is an example of showing one element when another is hovered over:

HTML:

<div id="me">Hover over me to display something else</div> 
<div id="else">Something else</div> 

jQuery:

$("#me").hover(function(){ 
    $("#else").show(); 
},function(){ 
    $("#else").hide(); 
});