[CSS] Hover - Text

aliasltb · 12.03.2010

Ich habe folgendes Problem:
Ich habe einen Button, der mit Hilfe eines Divs und einem Namen dargestellt wird.
Und wenn man per Hover über diesen Div fährt soll darunter eine weitere Box angezeigt werden. Und diese soll 10 kleine Bilder enhalten, die als Links dienen.

Mein Problem liegt jetzt darin, dass die zweite Box, die beim Hover dargstellt wird, zwar ansich funktioniert, allerdings werden die Bilder, die sich darin befinden sollen, konstant angezeigt. Das heißt egal ob man mit der Maus drüber fährt oder nicht, sie sind permanent zu sehen, obwohl sie ja eigentlich erst sichtbar sein sollten, wenn man mit der Maus über das erste Div fährt.

Code habe ich jetzt noch keinen speziellen, da ich ihn immer wieder gelöscht, geändert und erneuert habe. Daher hatte ich viele Varianten.

Hat eventuell von euch einer eine Idee oder evtl eine Erklärung dafür?

dernorb · 12.03.2010

AW: [CSS] Hover - Text

das musst du mit display:hidden machen.. die bilder müssen in dem div sein der verdeckt ein soll.
such dier am bessten ein beispiel für eine hover navi aus dem netz und ersetze die menüpunkte mit den bildern

Syrakos · 12.03.2010

AW: [CSS] Hover - Text

Was auch nicht vergessen werden darf, wenn die Maus den Div-Bereich wieder verlässt das Div wieder zu hidden, ansonsten wird es nach dem ersten Hover eingeschalten und bleibt permanent erhalten.

sokie · 12.03.2010

AW: [CSS] Hover - Text

hier mal ein schnelles Beispiel,wie das aussehen kann:

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="language" content="de" />
<style type="text/css">
  *{padding:0;margin:0;}
  #menu{
    width: 200px;
    padding: 5px;
    border: 1px solid #336688;
  }
  #menu #bildlinks{
    display: none;
  }
  #menu:hover #bildlinks{
    display: block;
  }
  #bildlinks a img{
    padding: 2px;
    border: 0;
  }
</style>
<title></title>
</head>

<body>
<div id="menu">
  <p>Men&uuml;</p>
  <div id="bildlinks">
    <a href=""><img src="symb.png" /></a>
    <a href=""><img src="symb.png" /></a>
    <a href=""><img src="symb.png" /></a>
    <a href=""><img src="symb.png" /></a>
    <a href=""><img src="symb.png" /></a>
    <a href=""><img src="symb.png" /></a>
    <a href=""><img src="symb.png" /></a>
    <a href=""><img src="symb.png" /></a>
    <a href=""><img src="symb.png" /></a>
    <a href=""><img src="symb.png" /></a>
  </div>
</div>
</body>
</html>

zum testen dieses beispiels kannst du eine (symb.png) png datei von 30x30 px benutzen.

(funktioniert natürlich nicht im IE<=6 ; (hover nur auf a-elementen))

aliasltb · 12.03.2010

AW: [CSS] Hover - Text

Danke dir, das hilft mir sehr weiter.