XHTML

Nov 1, 2008

Hover-Effekte mit CSS

XHTML
snippet
Internet
CSS

Hover-Effekt ohne HTML-Event-Handler und JavaScript.
Das HTML Snippet:

<div class="email-hover">
  <a href="/contact">
    <img src="/assets/imgs/floh-at-netzaffe-punkt-de.gif" alt="floh-at-netzaffe-punkt-de" height="12" width="114"><
   </a>
</div>

Das CSS-Snippet:

div.email-hover a{
  background: url(img/floh-at-netzaffe-punkt-de-hover.gif);
  background-repeat: no-repeat;
  display:block;
  width: 114px;
  height: 12px;
}
div.email-hover img{
  width: 114px;
  height: 12px;
  border:0;
}
div.email-hover a:hover img{
  visibility : hidden;
}
div.email-hover a:hover {/* IE FIX */
  border:0;
}
* html div.email-hover a{
  margin-right:0px
}
* html div.email-hover a:hover {
  width: 114px;
  margin-right:0; /* IE Fix */
}

Und so siehts aus: