zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Hover Effekt, Bild soll sich wechseln.

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 23.04.2015, 12:48
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 23.04.2015
Beiträge: 4
nimolas befindet sich auf einem aufstrebenden Ast
Standard 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
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 23.04.2015, 13:48
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.247
cloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblick
Standard

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.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 23.04.2015, 19:42
Benutzer
neuer user
 
Registriert seit: 22.04.2014
Beiträge: 75
Toro befindet sich auf einem aufstrebenden Ast
Standard

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>
CSS:
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);
}
Die länge des vom Text im link könnte das Bild und Abstände beeinflussen, deshalb auf .home auch Maße angeben

Geändert von Toro (23.04.2015 um 19:46 Uhr) Grund: scheibfehler
Mit Zitat antworten
  #4 (permalink)  
Alt 24.04.2015, 10:50
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 23.04.2015
Beiträge: 4
nimolas befindet sich auf einem aufstrebenden Ast
Standard

Danke, klappt!
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ä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


Alle Zeitangaben in WEZ +2. Es ist jetzt 17:26 Uhr.