#1

Sven aus Berlin

Forum-Sponsor  (435 Punkte)  ·   männlich  ·   Deutschland  ·   Nachricht senden

<li>-Tags Background färben, <a>-Links sollen ebenfalls eine andere Farbe erhalten

Hallo,

habe mal eine Frage zu li:hover, sprich, wo ich den hintergrund einzelner li's hovern kann. Dies ist mir auch gelungen, nur habe ich jetzt das Problem, dass ich nicht weiss, wie ich auch a-links in die gleiche Farbe wie die Schriftfarbe beim hovern bekomme.

Also zum Verständnis:

Die p ist normal #000000, a ist #ff0022 (rot). Wenn gehovert wird, wird der Background #ff0022 (rot), der p weiss und a bleibt #ff0022 (rot). Natürlich soll der a-Link beim hovern in weiss erscheinen und nicht auch in rot. Denn so ist der Link ja nicht zu sehen. Erreichen möchte ich, dass beim hovern li auch der a-Tag weiss wird, wie die Schriftfarbe.

Ich bin also noch nicht dahinter gekommen, wie ich dies bewerkstelligen muss? Hier mal der Teil der style_content.css:

style_content.css
/* Liste */
 
#ulmain {
    background: transparent;
}
 
* {
    margin: 0;
    padding: 0;
}
 
#content ul {
    height:1%; /*Fuer den IE6*/
    zoom: 1%; /*Fuer den IE6*/
    list-style-type: none;
    padding: 0px;
    margin: 0;
}
 
#content li {
    position: relative;
    display:block;
    overflow: hidden;
    line-height: 200%;
    margin: 0;
    padding: 7px 7px 7px 24px;
    vertical-align: middle;
    border-bottom: 1px solid #ccc;    
    background: url(../images/<cc :print value="&pic.bullet.filename">) no-repeat 7px 12px transparent;
}
 
#content li:hover {
    background: <cc :print value="&usercolor.dark"> url(../images/<cc :print value="&pic.bullet2.filename">) no-repeat 7px 12px ;
    color: white !important;
    cursor: pointer;
}
#content li:hover, #content li:focus, #content li a:focus, #content li a:hover:focus {
    filter: drop-shadow(0px 0px 3px <cc :print value="&usercolor.dark">);
    color:white !important;
}

Wie ihr seht, habe ich es schon mit :focus probiert, ebenso mit :after, und :before. Leider komm ich nicht weiter. Jemand ein Tipp für mich?

 Gelöst: Habe zwei neue Codefolgen hinzugefügt: Dennoch danke für Euer Interesse!

#content ul li a {
	color:<cc :print value="&usercolor.dark">);
}
 
#content ul > li:hover > a  {
	color:white;
}

 


Spontaneität muss sorgfältig geplant werden.

400 Aufrufe | 1 Beiträge