jQuery - toggle problem

Na strani želim vstaviti skriti element (display: none), ki se pokaže, ko grem z miško nanj (hover).

Problem pri jQuery-u se pojavi, če je ob nalaganju strani miška že postavljena na element (#next-url). Potem se element pokaže, ko grem z miško stran, namesto, da bi ostal skrit.

<script type="text/javascript">

$(document).ready(function(){

    $("#next-url").hover(function(){

        $(this).toggle();

    });

});

</script>

<div id="next-url" style="display: none;">

Vsebina

</div>

Ima kdo rešitev kako bi rešil to težavo?

Mislim da je najlažje, če narediš en css class:

.hidden { display: none; }

potem pa z toggleclass dosežeš željeno

Aha... sem mislil, da se da vseeno uporabiti toggle s kakšnim malih trikom, ampak če ne najdem druge rešitve bom uporabil tvojo.

Hvala za nasvet!

Vidim, da si nekaj spreminjal, ko sem že pisal odgovor.

Tudi z toggleClass je zadeva enaka. Ko greš z miško stran od elementa, se class hidden skrije/izbriše in div se pokaže.

Hey,

načeloma jquery deluje, vendar imaš pri nalaganju strani div nastaljen na display:none. In nad elementom ki ni viden, hover funkcija ne more delovati. Če style="display:none;" nastaviš na display block, bo pa stvar delovala.

lp

Opa res moja napaka! Takole bi moralo biti prav - hvala za opozorilo.

<script type="text/javascript">

$(document).ready(function(){

    $("#next-url").hover(function(){

        $("#next-image").toggle();

    });

});

</script>

<div id="next-url">

<div id="next-image" style="display: none">Vsebina</div>

</div>

Sem našel primernejšo rešitev kot je toggle:

<script type="text/javascript">

$(document).ready(function(){



    $("#next-url").mouseover(function(){

        $("#next-image").show();

    }); 

    $("#next-url").mouseleave(function(){

        $("#next-image").hide();

    }); 

});

</script>

Mogoče kdo ve zakaj jQuery ne zazna premika miške po elementu, če se le ta že nahaja ob sami osvežitvi strani? Probal tudi z mouseenter ampak zadeva je ista.

Primer se nahaja na moji strani:

http://www.slo-foto.net/galerija_slika-95894.html&filter=super

Z miško greš ne desno stran slike in klikneš in pri tem miške ne premakneš iz elementa za naslednjo fotografijo. jQuery z mouseover/mouseenter ne zazna, da bi bilo polje aktivno zato se tudi ne sproži zgornji ukaz - prikaz #next-image. Če pa z miško zapustiš in se ponovno vrneš na polje, pa se seveda prikaže.

Se komu kaj sanja kako bi aktiviral sekundarni element, če ne zapustiš primernega (#next-url)?

kaj pa .hover()?

Ne tudi hover mi ni deloval.

S podobno težavo se je že nekdo drug srečal, vendar brez pravega odgovora:

http://stackoverflow.com/questions/5169342/jquery-remove-hover-on-initial-page-load-if-mouse-is-over-element

Probal sem še s tem pluginom, pa ni pomagalo:

http://cherne.net/brian/resources/jquery.hoverIntent.html