Problem mit hover

Zitat aus deinem vergangenen Thread, wo wir das Problem schon mal erörtert haben:
Wenn du die angesprochenen Elemente weiterhin nutzen möchtest, mußt du das <a>- und <span>-Element durch Block-Elemente ersetzen.

Ansonsten mußt du die Block-Elemente durch Inline-Elemente ersetzen, und diese dann entsprechend formatieren.

Deine Frage hätte sich aber eigentlich erübrigt, wenn du zwischenzeitlich die HTML-Elementreferenz für Inline- und Block-Elemente studiert hättest. Für erstere hatte ich dir in meiner zweiten Antwort den Link genannt.

mfg Maik

Demnach müsstest du alle darin enthaltenden Elemente (<fieldset>, <h6>, <ul>, <li>) z.B. durch ein <span>-Element ersetzen, denn solch ein Inline-Element darf im <a>-Element enthalten sein, und es im CSS jeweils seiner Funktion entsprechend formatieren.

Oder du verzichtest auf das <a>-Element, das dem Seitenbesucher letztlich eh keinen Verweis zu einer Datei / einem Dokument bietet, und verwendest meinetwegen stattdessen ein <div>-Element, das deine weiteren Block-Elemente auch enthalten darf.

CSS:
div:hover ... { }

mfg Maik
 
hm, so richtig komm ich da nicht zum Erfolg. Weder so noch so.

Hast du vielleicht ein Beispiel parat mit einem Div Layer der ohne Javascript eingeblendet wird?

Gruss
Julchen
 
Jipp, sowas hab ich :)

HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<meta name="author" content="Maik" />
<meta name="date" content="2010-03-02" />

<title>tutorials.de</title>

<style type="text/css">
/* <![CDATA[ */
div.popup div { display:none; }
div.popup:hover div { display:block; }
/* ]]> */
</style>
<!-- :hover-Fix für IE6 -->
<!--[if lt IE 7]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta2)/IE7.js"></script>
<![endif]-->

</head>
<body>

<div class="popup">Der Weg zu einem
      <div>CSS-Popup</div>
</div>

</body>
</html>


mfg Maik
 
Zurück