Axel Richter: Mouse Over mit CSS 3 verschiedene Mouse over Buttons ??

Beitrag lesen

Hallo,

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">

Mach den Dokumenttyp vollständig:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
oder
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
       "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
 <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
 <title>Rollover mit CSS - Beispiel 5</title>
 <style>
   a       { display:block;
             background-image:url(button.gif);
             width:120px; height:30px }
   a:hover { background-image:url(button_on.gif); }
 </style>
</head>
<body>
  <h1>Bild-Button mit CSS</h1>
  <p><a href="#"> </a></p>
</body>
</html>

Das sollte so gehen. Mit welchem Browser geht das nicht?

In jedem Fall solltest Du Inhalte in die A-Elemente schreiben, damit Textbrowser was zum Anzeigen haben. Du kannst sie ja per CSS verstecken. So etwa:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
 <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
 <title>Rollover mit CSS - Beispiel 5</title>
 <style>
   a { display:block;
       width:120px; height:30px;
       text-decoration:none;
   }
   a span {
       visibility:hidden;
   }
   a:link, a:visited, a:active, a:focus {
       background-image:url(bullet3.gif);
       color:blue;
   }
   a:hover {
       background-image:url(stones.jpg);
       color:red;
   }
 </style>
</head>
<body>
  <h1>Bild-Button mit CSS</h1>
  <p><a href="#"><span>Linktext</span></a></p>
</body>
</html>

viele Grüße

Axel