✔ DIV Hintergrundfarbe ändern bei mouseover

[mediaroad]

Hallo zusammen,

ich habe ein kleines Problem. Ich möchte gern meinem DIV sagen, dass er bei mouseover eine andere Hintergrundfarbe hat. Der komplette DIV Layer ist verlinkt.

Hab auch schon gegooglet, aber leider nur Dinge mit Javascript bzw. PHP gefunden.
Würde das gern in der CSS regeln. Ist das überhaupt möglich? Wenn ja, wie mache ich das am besten.

Hier mal mein Beispiel

.teaser{
		width:385px;
		height:150px;
		background-color:#efefef;
		float:left;
}
.teaser a:hover{
		width:385px;
		height:150px;
		background-color:#c9c9c9;
		float:left;
}

Wäre super, wenn mir einer helfen könnte!

Vielen Dank schonmal im Voraus.

 

[Maik]

Hi,

mach es einfach wie beim Link mit Hilfe der :hover-Pseodoklasse:

.teaser:hover { background-color: ...; }

Blos wirst du davon nicht viel sehen, da mit deinem gezeigten Stylesheet der Hintergrund des berührten Links (a:hover) die Hintergrundfarbe des Elternelements überdeckt. Oder diente dieser nur als "Notlösung"?

mfg Maik

 

[mediaroad]

Das habe ich ja schon versucht. Hier nochmal mein CSS Code und zusätzlich die Einbindung bei HTML

.teaser{
		width:385px;
		height:150px;
		float:left;
}
.teaser a:link{
		width:385px;
		height:150px;
		background-color:#efefef;
		float:left;
}
.teaser a:hover{
		width:385px;
		height:150px;
		background-color:#c9c9c9;
		float:left;
}

<a href="#"><div class="teaser"></div></a>

Das Problem ist, dass ich die Hintergrundfarbe ändern will nicht die Textfarbe.

Hatte ja eine Lösung mit Bildern, dass Ding ist nur ich kann da keinen Text mehr hineinschreiben. Hier mal meine Lösung mit den Bildern

<div class="teaser">
	<a href="http://www.link.de" title="Link" target="_blank">
            <img name="mieten" src="bilder/teaser_mieten.png" alt="Fahrzeuge mieten" 
             onmouseover="document.images['mieten'].src='bilder/teaser_mieten_over.png'"  
             onmouseout="document.images['mieten'].src='bilder/teaser_mieten.png'"/>
       </a>
</div>

Ich steh da grad echt aufm Schlauch!

 

[Maik]

Ein Inline-Element (a) darf kein Block-Element (div) enthalten - also muß hier das Markup umgestellt werden:

<div class="teaser"><a href="#">...</a></div>

... und schon existiert auch eine Übereinstimmung im Markup und dem Selektor ".teaser a:hover".

mfg Maik

 

[mediaroad]

Hab das Problem gelöst. Hab nochmal was andres probiert, was ich zwar schon hatte aber scheinbar war da vorhin nen kleiner Mistake drin.

Hier der Code

<a href="">
     <div class="teaser" onMouseOver="this.style.backgroundColor='#c9c9c9';"   
      onMouseOut="this.style.backgroundColor='#efefef';"></div>
</a>

Aber trotzdem Danke für deine Hilfe!

 

[Maik]

Hab das Problem gelöst [...]

Hier der Code

<a href="">
     <div class="teaser" onMouseOver="this.style.backgroundColor='#c9c9c9';"   
      onMouseOut="this.style.backgroundColor='#efefef';"></div>
</a>

Wie gesagt, der Codesnippet ist in dieser Form überhaupt nicht valide, und fällt beim Validatorcheck gnadenlos durch.

Die von mir gezeigte valide HTML-Version benötigt den JS-Code dann auch überhaupt nicht, da nun das vorgesehene Stylesheet greift

lg Maik

 

[mediaroad]

Hallo Maik,

Ok, du hast recht das hab ich nicht bedacht. Nun hab ich deine Variante probiert. Funktioniert auch überall, aber nicht im Firefox.

So hab ich es jetz geschrieben

.teaser{
		width:385px;
		height:150px;
		float:left;	
}
.teaser a:link{
		width:385px;
		height:150px;
		float:left;
		background-color:#efefef;		
}
.teaser a:hover{
		background-color:#c9c9c9;		
}

<div class="teaser"><a href="#"></a></div>

Was ist denn jetzt da sein Problem bzw. was hat Firefox für ein Problem mit diesem Code?

lg mediaroad

 

[Maik]

Die Frage kann ich dir nicht beantworten, denn bei mir funktioniert das Stylesheet im FF tadellos.

Versuch es entweder mal hiermit:

.teaser a{
                width:385px;
                height:150px;
                float:left;
                background-color:#efefef;
}

oder hiermit:

.teaser a:link, .teaser a:visited{
                width:385px;
                height:150px;
                float:left;
                background-color:#efefef;
}

Ansonsten wäre in den modernen Browsern aber auch das hier möglich:

.teaser{
		width:385px;
		height:150px;
		float:left;	
        background-color:#efefef;
}
.teaser:hover { 
        background-color:#efefef;
}

<div class="teaser"></div>

... um hier nochmal auf die Problemstellung deines Topics einzugehen, falls mein eingangs empfohlener Vorschlag bei dir nicht angekommen sein sollte.

mfg Maik

 

[mediaroad]

Ok das funktioniert.

Ich danke dir für deine Hilfe!

Schönes Wochenende