• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

Textbox display:block nicht nur bei hover des Links

bine

bine

Lounge-Member
Eine Textbox erscheint mit nachfolgendem Code bei hover der Überschrift.
Nun möchte ich aber, das diese Box erst wieder verschwindet, wenn ein hover über die nächste Überschrift meiner Liste erfolgt. Mich stört, das die Box sofort verschwindet, wenn die Maus nicht genau auf dem Textlink bleibt.

Ist das irgendwie nur mit CSS zu machen? Ich komm grad nicht auf den Weg.

Code: 
#container {
width: 250px;
}

#container a {
color: #000;
text-decoration: none;
}

#container a .box {
display: none;
}

#container a:hover .box	{
width: 200px;
display: block;
border: 1px dashed #C64934;
margin: 5px 0 5px 0;
padding:3px;
font-weight:normal;
color:#344161;
}

<p>auf einen Blick: </p>
<ul style="margin: 20pt; padding: 0pt; list-style-image: url(images/haken.gif);">
<li><div id="container"><a href="#">Überschrift1<span class="box">Inhalt der 1. Textbox</span></a></div></li>
<li><div id="container"><a href="#">Überschrift 2<span class="box">Inhalt der 2. Textbox</span></a></div></li>
 
Hi bine.
Code: 
<?xml version="1.0" encoding="iso-8859-1"?>
<!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" xml:lang="de">
<head>
<title>Dokumenttitel</title>
<style type="text/css">
/*<![CDATA[*/
#container {
width: 250px;
display: block;
}
#container a {
color: #000;
text-decoration: none;
display: block;
}
#container a .box {
display: none;
}
#container a:hover .box	{
width: 200px;
display: block;
border: 1px dashed #C64934;
padding:3px;
font-weight:normal;
color:#344161;
}
/*]]>*/
</style>
</head>
<body>
<p>auf einen Blick: </p>
<ul style="margin: 20pt; padding: 0pt; list-style-image: url(images/haken.gif);">
<li><div id="container"><a href="#">Überschrift1<span class="box">Inhalt der 1. Textbox</span></a></div></li>
<li><div id="container"><a href="#">Überschrift 2<span class="box">Inhalt der 2. Textbox</span></a></div></li>
</body>
</html>
 
Zuletzt bearbeitet:
danke dkdenz, im FF funzt das wunderbar, leider frißt der IE das so nicht. Bei dem kommt auf diese Weise gar keine Textbox.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben