Jak zanikać w div na najeździe/najedź myszką używając jquery?

Question

Mam div, który jest ustawiony na display:hidden. Chcę, aby ten element div był ustawiony na display:block, gdy określony element (#navbar li a) jest najechany. Oto mój javascript.

$('document').ready(function(){ 
    $("#navbar li a").onmouseover(function{ 
     $("#navbar ul").css("display","block"); 
    }); 
}); 

wiem, że $("#navbar li a") targeting właściwego elementu, jak już przetestowane. Czy coś jest nie tak z moim kodem javascript?

edytuj: jest to menu rozwijane. #navbar ul jest zagnieżdżoną listą.

Answer 1

Nie ma „onmouseover”

Prawo syntaxsis jest:

$("#navbar li a").on("mouseover", function(){ 
    $("#navbar ul").show() //Can use just show here 
}) 

Answer 2

Tak, coś jest nie tak z kodem, jQuery nie posiada zdarzenie onmouseover i jaki jesteś prawdopodobnie szuka to wydarzenie mouseenter, jak mouseover pożarów stale na mouseMove:

$(document).ready(function(){ 
    $("#navbar li a").on('mouseenter', function(){ 
     $("#navbar ul").show(); 
    }); 
}); 

drugiej strony, można prawdopodobnie zrobić to tylko z CSS?

Answer 3

Zastosowanie .hover

$('document').ready(function(){ 
    $("#navbar li a").hover(function(){ 
     $("#navbar ul").css("display","block"); 
    }); 
}); 

Jeśli chciałbyś rozjaśniania skutku wówczas wystarczy użyć .fadeIn

DEMO

$(function() { 
$('#div1').hover(function() { 
    $('#div2').fadeIn(); 
}, function() { 
    $('#div2').fadeOut(); 
}); 
}); 

Dla kompletności oto CSS tylko metoda:

(FYI to za pomocą tej metody nie będzie fad e go zgodnie powiedzmy, po prostu sprawiają, że pojawiają się przy aktywowaniu a następnie znikają po najechaniu na nie.)

DEMO

#div2 { 
    width: 200px; 
    height: 200px; 
    background: red; 
    display: none; 
} 

#div1:hover ~ #div2 { 
    display: block;  
} 

Answer 4

wszystkie odpowiedzi są pokaż/ukryj. Twój kod też. Pytanie jest o fade in.

użycie .fadeIn() .fadeOut zamiast show hide

http://api.jquery.com/fadeIn/

Answer 5

Jeśli chcesz div faktycznie znikną z nieprzejrzystej w 100% to jesteś zacząć nieprzejrzysty na powiedzieć 80% (pokazane jako 0,8), a następnie zanikanie do 100% (pokazane jako 1,0). Ponieważ chcesz zacząć od poziomu krycia, element div musi być ukryty przy użyciu "display none", wówczas poziom nieprzezroczystości można ustawić bez widocznego efektu, a następnie uczynić go widocznym i zaniknąć do 100%:

$("div.mydivclass").on("mouseenter", function() { 
    $(this).css("display", "none"); 
    $(this).fadeTo("fast", 0.8); 
    $(this).css("display", ""); 
    $(this).fadeTo("10", 1.0); 
});