Mouseover mal anders.... help

[Fanguro]

Hallo zusammen,
ich habe mal eine Frage! Ist es per CSS (egal welche prog. Sprache), Linkleiste per Mouseover, eine andere Farbe zu zuweisen. Argh, ist schwer zu erklären... ich zeige es hier mal so auf :

(Das ist Standard)
Startseite
Kontakt
Bilder
Gästebuch

(hier geht jetzt die maus über "Bilder")
Startseite
Kontakt
Bilder
Gästebuch

Also alle links haben die selbe Farbe. Bei mouseover werden zb alle anderen heller und der eigentliche Link, über den man gefahren ist, bekommt nochmal eine andere Farbe....

 

[Gumbo]

Mit der Pseudo-Klasse :hover ist dies möglich:

<ul id="nav">
	<li><a href="http://example.net/">Beispielverweis</a></li>
	<li><a href="http://example.net/">Beispielverweis</a></li>
	<li><a href="http://example.net/">Beispielverweis</a></li>
	<li><a href="http://example.net/">Beispielverweis</a></li>
	<li><a href="http://example.net/">Beispielverweis</a></li>
</ul>

#nav li a {
	color:			#000;
}
#nav:hover li a {
	color:			#888;
}
#nav li a:hover {
	color:			#33c;
}

Allerdings wird dies in manchen Browser – darunter auch der Internet Explorer – nicht wie gewünscht funktionieren.

 

[versuch13]

 #nav:hover li a {
     color:            #888;
 }
 #nav li a:hover {
     color:            #33c;
 }

Allerdings wird dies in manchen Browser – darunter auch der Internet Explorer – nicht wie gewünscht funktionieren.

Ah, es geht also auch anders, ich habe das immer mit haufenweise onMouseOver Befehlen für jeden Link gemacht.
Verstehen tue ich es jetzt aber leider nicht, wo besteht denn der unterschied zwischen
#nav:hover li a und #nav li a:hover ?

#nav:hover li a sind also alle Links in der Liste bei hover und es reagieren auch alle sobald man über die Liste fährt?

#nav li a:hover sind ebenso alle Links in der Liste, aber es reagiert halt nur der einzelne über den man fährt?

Habe ich richtig verstanden oder? Und funktionieren tut es im IE aber dann nicht, wie z.B. td:hover oder ähnliches?

Danke. Gruß

 

[Fanguro]

jetzt versteh ich nurnoch bahnhof!

 

[versuch13]

Sorry, hier ist ein kleines Beispiel wie ich das damals machte, ist halt echt viel zu tippen und ich hab keine Ahnung ob es eine bessere Lösung gibt. Auf jeden Fall funktioniert es so im InternetExplorer.
Mußte das jetzt selbst erst nochmal ausprobieren, deshalb hat es ein wenig gedauert.

<style type="text/css">
 .links {
 	color:#000000;
 }
 ul li a:hover {
 	 color: #FF0000;
 }
 .links_hover {
 	color:#00FF00;
 }
 </style>

<ul>
  <li>
  <a href="#" class="links" id="L1" 
  onmouseover="L2.className='links_hover'; L3.className='links_hover';"
  onmouseout="L2.className='links'; L3.className='links';">Link 1</a>
  </li>
  <li>
  <a href="#" class="links" id="L2" 
  onmouseover="L1.className='links_hover'; L3.className='links_hover';"
  onmouseout="L1.className='links'; L3.className='links';">Link 2</a>
  </li>
  <li>
  <a href="#" class="links" id="L3" 
  onmouseover="L2.className='links_hover'; L1.className='links_hover';"
  onmouseout="L2.className='links'; L1.className='links';">Link 3</a>
  </li>
 </ul>

Also, bei onmouseover über einen der Links, wird den anderen die Klasse links_hover zugeordnet. Bei onmouseout dann wieder die Klasse links.
Ich habe da aber echt nicht viel Ahnung von also es geht wahrscheinlich auch irgendwie einfacher..


Hoffe ich konnte dir weiter helfen.. Gruß

 

[Fanguro]

thx das funktioniert bei mir einwandfrei!
nur noch eine Frage: Und zwar sind vor jedem Link ja solche Punkte. Kann ich die irgendwie weck machen?

 

[versuch13]

ul {
list-style-type:none;
}

 

[webmastersworld12]

linktext bei textlink, einfach wie bei img ;-):

<a href="start.html" title="Linktext">Test Linktext</a>

... fertig! ... thread dürfte erledigt sein?

 

[versuch13]

linktext bei textlink, einfach wie bei img ;-):

<a href="start.html" title="Linktext">Test Linktext</a>

... fertig! ... thread dürfte erledigt sein?

Mh, hast du dich irgendwie im Thread vertan?

 

[webmastersworld12]

maybe, dann sry