Hover Effekt mit Text

[Raptor]

Hi, ich suche schnelle Hilfe für folgendes PRoblem....stehe gerade voll aufm Schlauch

Ich möchte eine Box darstellen, in welcher ein Link platziert ist. Die Box ist schwarz, fährt man mit der Maus drüber, so färbt sich der Link schwarz und die Box weiss.....that's it.

Bitte beachten, ich will nicht erst den Linktext berühren müssen damit er sich mitfärbt....ich will dass dies bereits beim berühren der Box passiert.

Ich habe folgendes probiert:

header .box {
float:right;
background: #000;
padding:6px 12px;
color:#eee;
margin-top:75px;
transition: background .35s ease-in-out;
-moz-transition: background .35s ease-in-out;
-webkit-transition: background .35s ease-in-out;

}

header .box:hover {
background:#fff;
color:#000 !important;
}

So...die Box färbt sich zwar aber der Link nicht und wenn ich jetzt link Attribute da hinzufüge, dann reagiert die Linkfarbe nur wenn ich direkt über den Link fahre, das will ich ja aber nicht....der Link soll ebeso beim berühren der Box umgefärbt werden.

 

[Nicole]

Also bei mir funktioniert es so:

div.box .link{
font-size:14px;
color:#FF9933;
padding:0px;
margin:5px 0 8px 15px;
text-decoration:underline;
font-weight: bold;
display: block;
background: #FFFFFF;
}
div.box .link:hover{
color:#B0C0D0;
font-size: 14px;
font-weight: bold;
background: #000000;

Gruß Nicole

 

[wpler]

Falls noch net gelöst

header .box {
float:right;
background: #000;
padding:6px 12px;
color:#eee;
margin-top:75px;
transition: background .35s ease-in-out;
-moz-transition: background .35s ease-in-out;
-webkit-transition: background .35s ease-in-out;

}

header .box:hover {
background:#fff;
color:#000 !important;
}
header .box:hover > a {
color:#000;
}

Wenn der Link (also a-tag) dokumentweit mit einer Farbe definiert ist (auch mittels selektor vorher) wird standardmäßig diese Defination benutzt, auch wenn ein Elternelement den Text als andersfarbig definiert (denn der a-tag ist nicht nur text ;-)). Ergo muss Du das auch explizit definieren.

 

[phreak]

Genau, einfach den Hover um die Box, Link um den Text. Farbe und wechsel der Boxfarbe und Texthover um die Box.

<Hover>
<Boxfarben>
<Box>
<Linkfarben>
<Link>
/.....>

______________

<box>:
#selektor {
width: 300px;
height: 100px;
background: green;
}

<box:hover>
#selektor:hover {
background: red;
}

<link>
#selektor Link:hover {
color: yellow;
text-decoration: underline;
}

____________

Lösung war ja schon parat.

Man könnte auch 2 Style-Klassen um das komplette Element legen, und diese per Java RollOver bzw. RollOut zu switchen.