Umieść wskaźnik myszy nad ukrytym elementem, aby go wyświetlić.

Question

Czy jest jakiś sposób na najechanie na element, który jest już ukryty. Próbuję naśladować to, co robi Steam z nawigacją strzałkową na ich stronie głównej. Zauważysz, że gdy po raz pierwszy dostać się do strony, nie ma strzałki wskazujące:

Następnie po najechaniu na obszarze tam gdzie powinna być strzałka, to pokazuje się:

Próbowałem ustawić moje divy, które zawierają obrazy strzałek do display: none i próbowałem również visibility: hidden, ale nie wydaje się pracować z metodami zawijania lub mouseover w jQuery. Pomyślałbym, że visibility: hidden sprawiłoby, że zadziała, ale nie wydaje się, żeby tak było. Czy istnieje inny sposób, w jaki mogę ukryć te divy od samego początku, ale nadal mogę mieć na nich działające zdarzenia?

Answer 1

ustawić go na zero krycie zamiast:

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

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

Answer 2

Użyj metody jQuery, aby zmienić krycie elementu w stanie aktywowania.

Witryna jQuery zawiera przykładowe ale coś takiego powinno wystarczyć

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

Od strony jQuery Hover.

Answer 3

Można ustawić to na opacity: 0.

Aby zrobić z niego przeglądarkę, prawdopodobnie chciałbyś zrobić to za pomocą jQuery.

Answer 4

Jednym ze sposobów, aby to zrobić, jest użycie alternatywnego testu wydajności, tak, że nie ma treści, ale po podskoczeniu pokazuje "strzałkę" div. Kiedy "strzałka" div (lub div testu trafień) zostanie zakończona, wówczas "strzałka" div zostanie ukryta ponownie.

Alternatywnie można użyć tego samego div dla testu trafienia i "strzałki", tak aby obraz tła był używany dla elementów wizualnych elementu div. Po ukryciu można ustawić przesunięcie obrazu, aby ustawić go w pozycji, która wskazywałaby "strzałkę". Po zakończeniu można ustawić przesunięcie tła do pozycji, w której obraz ze strzałką nie będzie już wyświetlany.

I na koniec, jeśli zawartość zawsze będzie znajdować się w tej samej pozycji, co obszar testu trafień, można ustawić krycie elementu div na zero i odpowiednio przełączyć.

Answer 5

Można ustawić przezroczystość elementów 0. które pozwoliłyby im odbierać zdarzenia kursorem myszy (właściwie mouseenter i mouseLeave) ale w praktyce spraw, aby były niewidoczne dla użytkowników.

Answer 6

Nie można najechać wskaźnikiem myszy na element niewidoczny lub element niewyświetlony. Możesz najechać kursorem na widoczny element, a następnie użyć go, by pokazać inny ukryty wcześniej element. Możesz też najechać kursorem na przezroczysty element i uczynić go nieprzezroczystym.

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(); 
});