Gruppen

Top Gruppen: Windows 7; Windows Vista; Windows XP; Textverarbeitung; Excel; DSL; Internet Browser; E-Mail/Outlook
Betriebsysteme: Windows classik; Linux; BS-Sonstige
Software: Datenbanken; Bildbearbeitung; Audio/mp3/Video; Security/Viren; SW-Sonstige
Hardware: Mainboard/CPU; Grafikkarten; Peripherie; Laptop/Notebook; HW-Sonstiges
Netzwerk: Telefon,ISDN,Modem; W-Lan; NW-Sonstiges
Programmierung: PHP,ASP,Perl...; Java,C++...; Webseiten/HTML
Sonstiges: PC-Sonstiges; Plauderecke; SN Intern; Test

/ Forum / Webseiten/HTML

Webseiten/HTML

Fragevon tomslawik vom 29.12.2019, 15:20 Options

CSS

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

Antwort schreiben

Antwort 1 von sutadur vom 29.12.2019, 15:42 Options

Ja ... und?

Antwort 2 von tomslawik vom 29.12.2019, 15:52 Options

Ich will aber jetzt den Code wissen

Antwort 3 von tomslawik vom 29.12.2019, 15:54 Options

Ach hab ihn doch auf irgneiner webseite gefunden

Antwort 4 von sutadur vom 29.12.2019, 17:04 Options

Zitat:
Ich will aber jetzt den Code wissen

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

Antwort 5 von katy vom 29.12.2019, 17:24 Options

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

Antwort 6 von Friedel vom 29.12.2019, 17:52 Options

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.

Antwort 7 von Supermax vom 29.12.2019, 18:04 Options

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

Antwort 8 von Supermax vom 29.12.2019, 18:05 Options

SelfHTML

Antwort 9 von tomslawik vom 29.12.2019, 22:30 Options

Beim Internet Explorer 6 geht es mal wieder nicht

Antwort 10 von tomslawik vom 29.12.2019, 22:36 Options

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);
}

Antwort 11 von katy vom 30.12.2019, 09:00 Options

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

Antwort 12 von tomslawik vom 30.12.2019, 14:10 Options

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

Hier klicken

Antwort 13 von gast42 vom 30.12.2019, 14:15 Options

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)

Antwort 14 von Supermax vom 30.12.2019, 14:18 Options

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)

Antwort 15 von katy vom 30.12.2019, 14:39 OptionsLösung

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

Hinweis

Diese Frage ist schon etwas älter, Sie können daher nicht mehr auf sie antworten. Sollte Ihre Frage noch nicht gelöst sein, stellen Sie einfach eine neue Frage im Forum..

Neue Einträge

Tipp einschicken

News einschicken