Supportnet / Forum / Webseiten/HTML

Hallo, ich habe ein<span> objekt, dass seine Farbe ändrn soll, wenn man mit der Maus raufgeht.

Ja ... und?

Ich will aber jetzt den Code wissen

Ach hab ihn doch auf irgneiner webseite gefunden

Dann hättest Du das auch schreiben sollen. Eine vernünftige Fragestellung erleichert hier vieles ...

Hallo tomslawik,

sicherlich hättest du hier kompetente Hilfe erhalten, wenn du eine vollständige Frage gestellt hättest. Jetzt wäre es für künftige Forumsbesucher nicht uninteressant, welche Lösung du denn selbst gefunden hast. Möglicherweise gibt es sogar noch Verbesserungsvorschläge, denn so manche vermeintliche Lösung, die irgendwo irgendwann einmal veröffentlicht wurde, hat Tücken, an die seinerzeit nicht gedacht wurde, oder es gibt Alternativen, die erst in neueren Browsergenerationen realisierbar sind.

Einen schönen Tag wünscht

katy

Nur mit CSS ist das nicht machbar. Man kann zwar auf das Überfahren mit der Maus durch hover reagieren, aber nur bei Links. Bei anderen Elementen (nicht Objekten) muss man das mit DOM machen.

Die Pseudoklasse :hover wird von den meisten modernen Browsern auch für andere Objekte außer Links unterstützt.

SelfHTML

Beim Internet Explorer 6 geht es mal wieder nicht

Was ist Falsch?
body
{
background-color:#FFFFFF;
color:#FFFFFF;
}

A:active
{
color:#000000;
text-decoration:none;
}

A:link
{
color:#000000;
text-decoration:none;
}

A:visited
{
color:#000000;
text-decoration:none;
}

A:hover
{
color:aqua;
text-decoration:none;
}

#grundgeruest
{
width:100%;
height:100%;
}

span.legend_active
{
font-weight:bold;
padding-bottom:2px;
padding-top:2px;
height:22px;
margin-right:1px;
padding-right:14px;
padding-left:14px;
color:#FFFFFF;
background-color:#93B2DD;
}

span.legend_active:hover
{
font-weight:bold;
padding-bottom:2px;
padding-top:2px;
height:22px;
margin-right:1px;
padding-right:14px;
padding-left:14px;
color:#FFFFFF;
background-color:#93B111;
}

span.legend_deactive
{
color:#FFFFFF;
padding-bottom:2px;
padding-top:2px;
height:22px;
margin-right:1px;
padding-right:14px;
padding-left:14px;
color:#000000;
background-color:#E5E5E5;
}

span.legend_deactive:hover
{
color:#FFFFFF;
padding-bottom:2px;
padding-top:2px;
height:22px;
margin-right:1px;
padding-right:14px;
padding-left:14px;
color:#000000;
background-color:#FFAE00;
}

#searchinput
{
color:#FFFFFF;
border:1px solid #FFFFFF;
background-color:#93B2DD;
width:365px;
}

#content
{
padding:10px;
background-color:#93B2DD;
color:#FFFFFF;
}

#submitbutton
{
color:#FFFFFF;
border:1px solid #FFFFFF;
background-color:#93B2DD;
}

td.schatten_links
{
width:10px;
background-image:url(schatten_links.png);
}

td.schatten_unten
{
height:10px;
background-image:url(schatten_unten.png);
}

td.schatten_links_unten
{
height:10px;
width:10px;
background-image:url(schatten_links_unten.png);
}

Hallo tomslawik,

ist das ein Quiz? Ich kann dich beruhigen: der CSS-Validator findet keinen Fehler, nur eine Warnung (beim body sind Schrift- und Hintergrundfarbe identisch).

Ansonsten füge doch bitte eine Problembeschreibung bei.

katy

Wenn ihr über eins der Kästchen geht seht ihr es.
Es klappt beim Firefox aber nicht beim IE

Hier klicken

IE6 versteht hover nur bei Links. das ist kein Fehler sondern liegt daran, dass dieser Browser uralt ist.

Abhilfe: setze die fragliche Passage in einen Link (wenn das irgendwie sinnvoll ist) oder nutze (zumindest für IE6 zusätzlich) JavaScript (onmouseover/-out)

IE 6 und ältere Versionen verstehen :hover nur bei Links, wie auch auf der von mir verlinkten SelfHTML-Seite erläutert wird; leider gibt es hier auch keine "Hacks", mit denen man dem IE 6 dieses Verhalten beibringen kann - da bleibt nur der Umweg über JavaScript mit den entsprechenden Eventhandlern (onmouseover/onmouseout)

Hallo tomslawik,

meine vorposter haben es ja schon beschrieben. Abhilfe müsste bei dir folgendes JavaScript im head-Bereich oder extern bringen:

<script type="text/javascript">
function spanhover() {
var spans=document.getElementsByTagName("span");
for (var n=0; n<spans.length; n++) {
if (spans[n].className=="legend_active" || spans[n].className=="legend_deactive" ) {
spans[n].onmouseover=function () {
this.className=this.className+"hover";
}
spans[n].onmouseout=function () {
this.className=this.className.replace(/hover/g,"");
}
}
}
window.onload=spanhover;
</script>

in dein CSS müsstest du nur kleine Änderungen machen:
aus span.legend_deactive:hover
wird

span.legend_deactive:hover, span.legend_deactivehover

entsprechend

span.legend_deactive:hover, span.legend_deactivehover

viel Erfolg

katy

• Befehlstabelle für css
• CSS-Stile sind verschwunden
• css in html einfügen
• Direktformatiertes CSS "überschreiben"
• eigene klasse in css