|
|||
Hover Effekt, Bild soll sich wechseln.
Hallo ich möchte gerne in meiner Navigationsleiste ein ICON als "home"-Button einsetzen. und beim mouseover soll sich die Farbe dieses Icons ändern.
Umsetzen wollte ich es mit einem hover Effekt in css. Leider tauscht sich das Bild nicht aus, Code sieht wie folgt aus: HTML: <nav> <ul> <li> <a href="#"><img src="./img/home.png" alt="" width="20px"></a> </li> </ul> </nav> CSS: ul li a:hover { background-image:url(../img/home_2.png); } Danke für eure Hilfe und Gruß Niclas |
Sponsored Links |
|
|||
Es gibt einen großen Unterschied zwischen einem Hintergrundbild und einem Bild, welches per img-Tag eingefügt wurde (und welches vor einem Hintergrundbild liegt)
Lösung ist also: Binde das home.png auch mit background-image ein. Bzw. du könntest du hier auch den Einsatz von einer icon-font in Erwägung ziehen, dann brauchst du keine Grafiken dafür. |
Sponsored Links |
|
|||
Hallo Nimolas,
Gib dem link wo das Hintergrund-bild rein soll eine klasse, aber stell das Bild nicht in das HTML: HTML-Code:
<nav> <ul> <li> <a href="#" class="home">Text Hier</a> </li> </ul> </nav> Code:
ul li a.home { display: block; height: 50px; /* die Höhe vom Bild ? */ width: 50px; /* die Breite vom Bild ? */ background-image:url(../img/home.png)top center no-repeat; color: transparent; /* wenn der Text nicht über dem Bild erscheinen soll */ } ul li a.home:hover { background-image:url(../img/home_2.png); } Geändert von Toro (23.04.2015 um 19:46 Uhr) Grund: scheibfehler |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Onmouseover-Effekt - Wenn Maus auf Bild1 soll Bild 2 zu Bild 3 wechseln. | Andreas91 | Grafik, Design, Typografie | 1 | 06.09.2011 23:41 |
Hilfe css Menu center | xXcyberXx | CSS | 5 | 28.11.2010 20:51 |
Text und Bild gleichzeitig hover effekt farbe ändern | JS-Gestaltung | CSS | 1 | 16.10.2009 20:53 |
Darstellungsproblem CSS Navigation im IE7 | pcklinik | CSS | 7 | 09.09.2007 18:25 |
CSS Einsteiger bittet um Hilfe | pcklinik | CSS | 0 | 06.09.2007 15:40 |