[FRAGE] jquery hoverfunction hilfe

[Blodyman]

Hi, ich hab nen kleines Problem. Ich wollte meine Navigation etwas dynamisch gestalten. Ich bin auch noch blutiger Anfänger in Webdesign und Programmierung.
Ich hab mir das etwas so vorgestellt: Ich geh mit der maus auf den Listenpunkt und es erscheint ein kleiner Pfeil daneben.
Es funktioniert auch alles wunderbar. Das Problem ist der Pfeil wird erst beim 2. überqueren des Listenpunktes angezeigt.

Gibt es irgendwie eine Möglichkeit das vorzuladen. Irgendwie eine for Schleife die alle Listenpunkte 1 mal durchgeht?
Also das gleiche nur ohne hover.

hier erstmal der Script:

function hover(menuID){
	$(document).ready(function(){
 	 $( document.getElementsByClassName("invisibleli")[menuID]).hover(function(){
  	  document.getElementsByClassName("navpfeil")[menuID].style.display = "block";
  	  },function(){
   	 document.getElementsByClassName("navpfeil")[menuID].style.display = "none";
 	 });
	});
}

Hier der nav-Bereich:

	<div id="nav">
		<ul>
			<li class="navli"><h2 onClick="location.href='index.html'">Startseite</h2></li>
			<li class="navli">
				<h2 onClick="verstecken('navlist', 0)">Bewerbungsunterlagen</h2>
					<ul class="navlist">
						<li class="invisibleli" onmouseover="hover(0)">

						 <div class="pfeilcontainer">
							<img src="pfeil.png" class="navpfeil">
						 </div>

						 <a href="Lebenslauf.html">Lebenslauf</a>
						</li>				
					</ul>
			</li>
			<li class="navli">
				<h2 onClick="verstecken('navlist', 1)">zu meiner Person</h2>
					<ul class="navlist">
						<li class="invisibleli" onmouseover="hover(1)">
						 <div class="pfeilcontainer">
							<img src="pfeil.png" class="navpfeil">
						 </div>
						 <a href="">Hobbys</a>
						</li>	
						<li class="invisibleli" onmouseover="hover(2)">
						 <div class="pfeilcontainer">
							<img src="pfeil.png" class="navpfeil">
						 </div>
						 <a href="">Eigene Projekte</a>
						</li>
						<li class="invisibleli" onmouseover="hover(3)">
						 <div class="pfeilcontainer">
							<img src="pfeil.png" class="navpfeil">
						 </div>
						 <a href="">Kenntnisse</a>
						</li>					
					</ul>		
			</li>
		</ul>
	</div>

und falls es wichtig ist nochmal die Funktion verstecken:

function verstecken(className, id){
  if(document.getElementsByClassName(className)[id].style.display == "none"){
    document.getElementsByClassName(className)[id].style.display = "block";
  }
  else{
    document.getElementsByClassName(className)[id].style.display = "none";
  }
}

Danke schonmal für alle Antworten

 

[s4ty]

Wenn du schon jQuery verwendest solltest du es auch benutzen also wird aus:

function hover(menuID){
  $(document).ready(function(){
    $( document.getElementsByClassName("invisibleli")[menuID]).hover(function(){
      document.getElementsByClassName("navpfeil")[menuID].style.display = "block";
    },function(){
      document.getElementsByClassName("navpfeil")[menuID].style.display = "none";
    });
  });
}

das

$(function(){
  $('.navlist > li').hover(function(){
    $('.navpfeil', this).show();
  },function(){
    $('.navpfeil', this).hide();
  });
});

und aus

<li class="invisibleli" onmouseover="hover(0)">

wird

<li class="invisibleli">

Das gleiche mit der anderen Funktion.



Zu deinem eigentlichem Problem, hast du mal eine Testseite wo man es sich mal angucken könnte? Interessant wäre die Position des Pfeiles und allgemein das CSS der Navigation.
Klingt nämlich danach das du ungewollt beim "mouseenter" direkt das "mouseleave" triggerst.

 

[Blodyman]

Danke für die schnelle Antwort. Ich hatte gestern noch etwas rumprobiert und irgendwie wollte das nicht so richtig. Hab das deshalb in ne eigene Funktion gepackt. So wie in deiner Lösung klappt das auch und ich glaub ich komm auch langsam dahinter.

Das mit der Funktion für die Unterpunkte bekomm ich irgendwie nicht hin und das mit der jquery Funktion geht jetzt auch beim neuladen der Seite.(Wieso auch immer, hab nix verändert.) Das Problem hab ich aber jetzt mit meiner eigenen Funktion. Situation: Ich lade die Seite neu und drücke auf den Menüpunkt. Nichts passiert. Erst beim 2. drücken auf den Menüpunkt klappt das Untermenü auf.

Ja, ich versuch irgendwie was dynamisches aufzubauen um bei der nächsten Bewerbung um einen Ausbildungsplatz zu punkten. Bin aber auch noch Anfänger. Das erste mal javascript hab ich letzte Woche gesehen bzw. ausprobiert.
Hab alles mal auf nen Freehost geladen.
markus-r.pytalhost.de

Kann mir auch noch jemand bei CSS helfen? Ich hab bei den Unterpunkten im Menü das Problem, dass der Link viel zu weit unten steht und nicht direkt neben dem pfeilcontainer wie ich das gerne hätte und ich verzweifel gerade etwas.

 

[s4ty]

Momentan geht der Code nicht weil das ul nicht die Klasse .navlist hat.

 

[Blodyman]

Das Script geht. Also das Menü klappt auf und aber nach neuladen der Seite erst beim 2. drücken auf den Menüpunkt.
Nur der 1. Menüpunkt hat keine, weil dieser keine Unterpunkte besitzt.