Hover mit CSS

Status
Nicht offen für weitere Antworten.
C

chell

Mitglied
Hallo,

ich habe mit CSS eine Klasse namens #mininav gemacht, die ich mittels eines DIV Elements aufrufe. Nun möchte dieser Klasse (sorry, falls ich falsche Namen benutze, bin noch neu bei CSS) einen Hover zuweisen. Praktisch das #mininav einen Hover effekt hat, der die Farbe ändert. Hier der Quellcode:

#mininav {
height: 20px;
width: 300px;
margin-left: 701px;
background-color: #FF9900;
margin-top: 0px;
border-left-width: 1px;
border-right-width: 0px;
border-top-width: 0px;
border-bottom-width: 0px;
color: #FFFFFF;
font-family: Arial,sans-serif;
padding-left: 3px;
}

und hier das DIV Element:

<div id="mininav">CSS since 2004</div>


Wie kann ich nun einen Hover Effekt machen?

Vielen Dank schonmal im Vorraus!

Mfg

chell
 
Zuletzt bearbeitet:
Einen CSS-Hover-Effekt kann man meines Wissens nur bei Links machen. Du kannst aber z. B. mit dem JavaScript-Event-Handler onmouseover/onmouseout arbeiten.
 
Vielen Dank!

Vielen Dank für deine schnelle Antwort. Hast du vielleicht (oder hast du) zufällig den Code dafür/eine Seite wo das erklärt wird?


Mfg

chell
 
Sorry

Sorry, aber ich steige da überhaupt nicht durch, zumal ich absolut keine Ahnung von JS habe. Gibt es da keine andere Lösung? Ich habe mal was von pseudo klasse gehört, aber ich glaube das hilft mir auch nicht, oder?


Mfg

chell:(
 
Es geht dabei um die Pseudoklasse " :hover ", eine klasse die nur aufgerufen wird wenn man mit der maus darüber fährt wie bei a:hover

Das würde alles wunderbar funktionieren, wäre da nicht der Internet Explorer der meint :hover könnte man nur auf <a> tags beziehen und nicht wie eigentlich geplant auf andere sachen wie <div> usw

daher ( vorrausgesetzt man will dass es für den IE auch funktioniert ) muss man das mit javascript machen, was etwa so aussieht

Code: 
<head>
<title>Hover test</title>
<style type="text/css">
<!--
td.test {
  border: 5px solid red;
  color: black;
  background: cyan;
  padding: 50px;
}
td.test2 {
  border: 5px solid yellow;
  color: white;
  background: black;
  padding: 50px;
}
-->
</style>
</head>
<body>
<table>
<tr><td class="test" onmouseover="this.className='test2'"
onmouseout="this.className='test'">Hello world!</td></tr>
</table>
</body>

hf
 
Das würde alles wunderbar funktionieren, wäre da nicht der Internet Explorer der meint :hover könnte man nur auf <a> tags beziehen und nicht wie eigentlich geplant auf andere sachen wie <div> usw
Zum Vergrößern anklicken....
D'oh, I'm sorry, das wusste ich nicht! Aber man lernt ja glücklicherweise nie aus! :)
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück