Hover Grafiken mit CSS erstellen
Die meisten Hover-Effecte auf Grafiken werden mittels JS gelöst. Diese Lösung basiert rein auf CSS. Dabei enthält der betreffende Link als Inhalt das Ausgangs-Icon. Per CSS wird dieses ausgeblendet und als Hintergrundgrafik das selbe Icon noch einmal gesetzt. Dieses kann dann simple per :hover oder :focus und CSS ausgewechselt werden.
HTML
<a href="#edit" title="hovericon" class="link_icon">
<img src="icon.gif" alt="edit"/>
</a>
CSS
a.link_icon img {
visibility: hidden;
}
a.link_icon {
background-repeat: no-repeat;
background-position: center center;
background-image: url(icon.gif);
}
a.link_icon:hover, a.link_icon:focus {
background-image: url(icon_hover.gif);
}
Hi,
danke für den Code. Klappt auch alles super, bis auf dass das icon nicht ganz angezeigt wird. Oben und unten fehlt ein Stück. Hast du vielleicht eine Idee woran es liegen könnte?
RooK