✔ Hintergrundbild eines Links bei :hover tauschen

[Eiszwerg]

Ich hatte vor in der Navigation den eigentlichen Hintergrund (bg_menu.jpg) beim Hovern gegen die Farbe "hellgrau" zu tauschen.
Leider klappt es nicht wie gewünscht. Wo ist mein Denkfehler?
Habe mir die verschiedenen Beiträge zu ähnlichen Themen mal zu Gemüte geführt, aber sleber nix gefunden, was mir weiterhilft

CSS:

.menu
{
text-align:left;
padding:0 20px 0 20px;
/*background-color:#3399FF;*/
background-image:url(../gfx/bg.jpg);
}

.menu a:link, .menu a:visited {
padding:0 5px 0 5px;
text-align:center;
width:8em;
height:2em;
background-image:url(../gfx/bg_menu.jpg);
text-decoration:none;
}

.menu a:hover
{
padding:0 5px 0 5px;
text-align:center;
width:8em;
height:2em;
background-color:#999999;
text-decoration:none;
}

HTML:

<td class="menu">
    <a href="index.php?s=start">Startseite</a>
</td>

Danke Euch für jeden Tip!

 

[Security]

Weil du die class dem td-tag in deinem xml-Script zuweißt. Du hast aber im CSS-Stylesheet stehen a.

 

[Eiszwerg]

Ich hatte geglaubt, dass ich dem Browser mittels

.menu a:link

sagen kann, dass die Links in der <td> mit der ID "menu"angesprochen werden sollen.

 

[Security]

Nein, aber willst du denn den Hintergrund von dem Link-tag oder von dem td ändern?

Überigens wird td in HTML als Tabellenspalte benutzt, nicht um Menus damit zu gestalten.

 

[Eiszwerg]

Ich möchte das <a> gestalten.
Als Beispiel habe ich nur einen Link drin. Später stehen in der Spalte mehr Links.
Witzig ist nur, dass es, entgegen Deiner Aussage, funktioniert, wenn ich beim normalen Link eine Hintergrundfarbe und kein Bild verwende und die dann tausche.
Warum sind keine Bilder gegen Hintergrund tauschbar bzw. wie kann ich anders vorgehen?

 

[Maik]

Hi,

setz hier mal die background-Eigenschaft ein:

.menu
{
text-align:left;
padding:0 20px 0 20px;
/*background-color:#3399FF;*/
background-image:url(../gfx/bg.jpg);
}

.menu a:link, .menu a:visited {
padding:0 5px 0 5px;
text-align:center;
width:8em;
height:2em;
background:url(../gfx/bg_menu.jpg);
text-decoration:none;
}

.menu a:hover
{
padding:0 5px 0 5px;
text-align:center;
width:8em;
height:2em;
background:#999999;
text-decoration:none;
}

Denn background-image und background-color "korrespondieren" nicht miteinander, wenn's um die Wertänderung geht.

 

[Security]

Also ja klar das Bild bleibt dir, erhalten und verschwindet nicht. Die hintergrundfarbe liegt hinter dem Hintergrundbild, und solange das Bild da bleibt siehst du die Farbe nicht.

Hintergrundbild und Frabe sind zwei unterschiedliche Eigenschaften.

 

[Eiszwerg]

Cooool
Ich danke!

Dann war meine CSS-Verschachtelung doch nicht falsch?
Hab's zwar nun auf:

td.menu a:link, td.menu a:visited

geändert und es funktioniert auch, aber was wäre korrekt gewesen, um die Links in der TD anzusprechen?

Und wie verhält es sich mit background-image und -color?
Sollte man das gar nicht verwenden? Oder nur selten, oder oder oder?

Nochmals danke!

 

[Security]

Naja klar, immer alles braf in den Hintergrund was auch nur selbiger ist, da Bilder für Bilde immer eine Beschreibung brauchen.

Aber du solltest einfach schreiben: background: color image attachment repeat position;
Also die Begriffe einfach durch den Wert ersetzten. Das ist kompakter und schöner.

 

[Maik]

Abgesehen von deiner speziellen Situation ein Hintergrundbild gegen eine Hintergrundfarbe zu tauschen, können diese beide Eigenschaften im täglichen Gebrauch schon eingesetzt werden.

background ist die allgemeine Eigenschaft für den Hintergrund, in der alle Werte der übrigen Eigenschaften aufgenommen werden können:

/* aus */

background-color: #fff;
background-image: url(...);
background-repeat: repeat-y;
background-position: left top;
background-attachment: fixed;

/* wird */

background: #fff url(...) repeat-y left top fixed;