Schriftfarbe beim hovern von Background-Image wechseln

[BuboBubo]

Hi zusammen

Kurze Frage:
Ich habe ein div mit einem background-image. Darin steht ein Text wie z.B. Home in weisser Schrift. Jetzt möchte ich gerne, dass der Text schwarz wird, sobald man mit dem Cursor über das background-image "hovert". Wie auf der Forumspage. Wie kann ich das realisieren?

Gruss
BuboBubo

 

[Flemli200]

wenn ich dich richtig verstehe kannst du das wie folgt realisieren:
Wenn dein hintergrund #background und deine Schrift #schrift ist (nur Bsp)
dann machst du folgendes:

#background:hover + #schrift
{
 /*hier der Code für deine Scrift also*/
color: #fff;
}

habs nich getestet, sollte aber von der logik her so funzen...

zum nachlesen: Link

 

[struppi]

dann machst du folgendes:

#background:hover + #schrift
{
 /*hier der Code für deine Scrift also*/
color: #fff;
}

habs nich getestet, sollte aber von der logik her so funzen...

Welcher Logik?
Dein Selektor ist nicht logisch. Dynamische Selektoren kommen am Schluss und wirken auf das Element, aber du wählst kein Element mit einem dynamischen Selektor, wie dein Beispiel suggeriert.

Die Frage des OP, ist etwas ungenau, da du ein Hintergrundbild nicht selektieren kannst, sondern nur HTML Elemente. Du erwähnst ein div, also suchst du sowas:

div:hover{ color:#fff;}

Wobei dieser Code, dann auf alle DIV Element wirkt.

 

[BuboBubo]

Vielen Dank für die Antworten!

Wie kann ich dein Tipp Struppi, nur für ein bestimmtes DIV anwenden?

 

[struppi]

Vielen Dank für die Antworten!

Wie kann ich dein Tipp Struppi, nur für ein bestimmtes DIV anwenden?

In dem du "das bestimmte" ermittelst. Wodurch ist es denn "bestimmt"?

 

[Space Vampire]

Indem du eine class oder id nutzt.
Erklärung

div{ ... }
Weist die Eigenschaften allen <div> zu

.eine_class{ ... }
Man beachte den Punkt.
Weist die Eigenschaften allen Elementen mit dem Attribut class="eine_class" zu.
Classes können beliebig oft in einem Dokument vergeben werden.

#eine_id{ ... }
Man beachte die Raute.
Weist die eigenschaften dem Element mit dem Attribut id="eine:id" zu.
IDs können pro Dokument nur einmal vergeben werden.

 

[struppi]

Naja, wieso soll er eine id oder Klasse benutzen? Das Element kann ja durchaus auch anders Selektierbar sein, da wir den Code nicht können, läßt sich dazu nichts konkreter sagen.

 

[Space Vampire]

Nennen wir es einfach eine Ahnung ;)
Und schaden kann Grundwissen im Zweifel nie

 

[struppi]

Nennen wir es einfach eine Ahnung ;)
Und schaden kann Grundwissen im Zweifel nie

Das stimmt. Aber das Grundwissen über Selektoren, hätte er ja schon durch den Link von Flemli200 bekommen können.

 

[BuboBubo]

Vielen Dank für die Erläuterungen. Die Basics, die Space Vampire erwähnt hat, kannte ich schon.
Bei mir funktioniert der Farbwechsel aber trotzdem nicht!
HTML-Code:

<div class="out wide"><div class="in">
<li>
<a href="http://www.google.ch">
<span class="titel">Massnahmen</span>
</a>
</li>
</div></div>

CSS-Code:

.titel{
font-size: 20px;
/*font-variant:small-caps;*/
text-align: center;
}

.out{
display:block;
background:#616161;
border:1px solid #ddd;
position:relative;
margin:.5em 0em;
left:0em;
width:164px;
float: left;
}

.in{
background-image:url(images/nav_btn_unselected.jpg);
background-repeat: no-repeat;
position:relative;
left:-.25em;
top:-.25em;
margin:0;
padding:1em 2em;
height: 15px;
}

.in:hover + .title{
background-image:url(images/nav_btn_selected.jpg);
color: black;

}

.wide{
width:164px;
}

 

[Space Vampire]

ändere das

.in:hover + .title{
background-image:url(images/nav_btn_selected.jpg);
color: black;
}

in das

.in:hover{
background-image:url(images/nav_btn_selected.jpg);
}

.title:hover{
color: black;
}

// EDIT
das

.in:hover + .title{}

wäre sowieso falsch und müsste wenn so lauten

.in:hover, .title:hover{}

würde aber dazu führen, dass beiden Elementen beide Eigenschaften beim Hovern zugewiesen werden.
Sprich: auch das <li> bekäme das Hintergrundbild.

 

[BuboBubo]

Funzt, leider auch nicht.....
Bild ändert sich(habe ich aber auch schon hingekriegt), Text bleibt aber immer noch gleich.

 

[Wustersoss]

Schau dir mal mein Beispiel an, dort ändert sich nur die Farbe des P-Tag beim hover über das div mit Hintergrundbild. Die Überschrift bleibt unbeinflusst.

<!DOCTYPE HTML>
<html>
    <head>    
        <meta charset="utf-8">    
        <title>DIV:hover mit Farbänderung auf Schrift
        </title>    
        <meta name="description" content="Seitenbeschreibung">
        <style type="text/css">    
        html, body { margin:0; padding:0;}     
        body{ background: #333; width: 610px; margin: 0 auto; font: normal 1em Arial, Helvetica; }     
        div { 
            background-image:url(http://upload.wikimedia.org/wikipedia/commons/thumb/b/b8/Jean-Baptiste-Camille_Corot_023.jpg/82px-Jean-Baptiste-Camille_Corot_023.jpg);         
            width:82px;         
            height:120px;         
            }     
        div:hover p{         
            color:white;     
            }      
        </style>
    </head>     
    <body>      <h1>DIV:hover mit Farbänderung auf Schrift</h1>
        <div>
            <h3>h3 bleibt</h3>
            <p>Home
            </p>
            <ul>
        </div>
    </body>
</html>