jQuery - toggle problem · Internet Mojster

74443812

12. mar 2012 ob 15:02

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?

1194

javascript programiranje jquery

SlimDeluxe

122310221449

12. mar 2012 ob 15:08

Mislim da je najlažje, če narediš en css class:
.hidden { display: none; }
potem pa z toggleclass dosežeš željeno

1

Lucifix

74443812

12. mar 2012 ob 15:12

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!

Lucifix

74443812

12. mar 2012 ob 15:42

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.

mrask

52274

12. mar 2012 ob 15:44

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

Lucifix

74443812

12. mar 2012 ob 15:49

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>

Lucifix

74443812

12. mar 2012 ob 16:06

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>

Lucifix

74443812

12. mar 2012 ob 20:58

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)?