Antworten zum Thema „bei hover partielles verändern?“

[thexe]

guten abend zusammen,
ich hab mich die letzten paar stunden abgequält und mühsam rumgefummelt, um nen design umzusetzen, sollte man doch mal ab und an machen, sonst rostet man echt ein

aber nun zum thema:

<div class="menu">
<ul id="menu">
<li><a href="index.htm">Index</a></li>
<li><a href="produkte.htm">Produkte</a></li>
<li><a href="referenzen.htm">Referenzen</a></li>
<li><a href="impressum.htm">Impressum</a></li>
</ul>
</div>

von der anzeige her alles überhaupt kein problem
nun möchte ich aber beim hover nicht den gesamten text einfärben, sondern nur die ersten 3 buchstaben
ich denke dass das mit ein paar "subgroups" möglich sein sollte, aber wie schon erwähnt, ich bin etwas sehr eingerostet und seh den wald vor lauter bäumen nicht mehr

ist das ganze überhaupt möglich, kennt jemand ne möglichkeit oder bin ich dazu verdammt javascript benutzen zu müssen:hmpf:
MfG the-xe

 

[daddaa]

AW: bei hover partielles verändern?

Hi,
gib doch einfach den ersten 3 Buchstaben ein <span>ABC</span>.
Dann einfach span:hover {color: red;}
Hoffe, ich hab kein fehler gemacht...

Gruß, daddaa

€: nicht so optimal... funktioniert ja dann nur bei den ersten 3 Buchstaben der hover, vllt fällt mir noch was besseres ein.

 

[thexe]

AW: bei hover partielles verändern?

ja das hatte ich auch schon ansatzweise, aber hat nicht so ganz geklappt

 

[sokie]

AW: bei hover partielles verändern?

soweit alles gut nur der selektor sollte auf dem <a> liegen:

a:hover span{
  /*formatierungen*/
}

 

[Jens_S]

AW: bei hover partielles verändern?

Probier das doch mal so

#menu li a:hover span{
text-decoration:none;
color:orange;
}
#menu li a:hover{
text-decoration:none;
color:red;
}

Da war ich eine Minute hinten dran.

 

[sokie]

AW: bei hover partielles verändern?

da wäre noch anzumerken, dass der IE <= 6 das nicht macht. für den muss man dann entweder eine js Lösung bauen, oder einen Ersatz

 

[thexe]

AW: bei hover partielles verändern?

soweit alles gut nur der selektor sollte auf dem <a> liegen:

a:hover span{
  /*formatierungen*/
}

ok darauf aufbauend hab ichs jetz endlich hinbekommen, danke schön

da wäre noch anzumerken, dass der IE <= 6 das nicht macht. für den muss man dann entweder eine js Lösung bauen, oder einen Ersatz

danke für die info, aber für den IE fang ich erst gar nicht an, dafür ists zum glück auch die richtige zielgruppe ;-)