nicht angemeldet
Div Bereich verschwindet
Gunnar BittersmannHallo,
vielleicht kann mir hier jemand helfen:
Ich habe einen Div Bereich in meiner HTML Seite definiert, der beim mouseover erscheinen soll. Dieser hat zwei Links. Wenn ich auf dem Menüpunkt bin, werden mir auch beide Links angezeigt, ich kann dann auch runter mit der Mouse und einen Link anklicken (also in dem Fall ein MenuItem). Geh ich mit der Mouse ein Link weiter, dann verschwindet der Bereich. Genau wenn der Mousezeiger in der Mitte der beiden MenuItems ist passiert es. Woran kann das liegen?
Anbei auszüge aus meinen Dateien:
html:
...
<body>
<div class="menuBar" onmouseover="showLink('test1')">
<a href="..">menu1
</a>
</div>
<div id="test1" class="menu" style="visibility: hidden" onmouseout="hideLink('test1')">
<a href="menuItem">
Hallo1
</a>
<a href="menuItem">
Hallo2
</a>
</div>
</body>
...
css:
a {
text-decoration: none;
}
div.menuBar{
background-color: #d0d0d0;background-color: #d0d0d0;
text-decoration: none;
}
div.menuBar a.menuButton{
color: #000000;
}
div.menu {
padding: 0px 1px 1px 0px;
}
div.menu a.menuItem{
}
javascript:
function showLink(name){
document.getElementById(name).style.visibility = "visible";
}
function hideLink(name){
document.getElementById(name).style.visibility = "hidden";
}
Vielen Dank im voraus schonmal.
Gruß
Gawd
-
Hi Gawd,
versuch mal
.menuItem{
margin: 0;
border: none;
}und
<div class="menuBar" onmouseover="showLink('test1')" onmouseout="hideLink('test1')">
<a href="..">menu1
</a>
</div>
<div id="test1" class="menu" style="visibility: hidden" onmouseout="hideLink('test1')" onmouseover="showLink('test1')">
<a href="#" class="menuItem">
Hallo1
</a>
<a href="#" class="menuItem">
Hallo2
</a>
</div>Sowas geht aber auch mit (fast) reinem css. Hier einer der Klassiker mit Erklärungen:
http://www.alistapart.com/articles/dropdowns/
Gruß
Antipitch-
Vielen Dank, werde ich machen.
Gruß
Gawd
Hi Gawd,
versuch mal
.menuItem{
margin: 0;
border: none;
}und
<div class="menuBar" onmouseover="showLink('test1')" onmouseout="hideLink('test1')">
<a href="..">menu1
</a>
</div>
<div id="test1" class="menu" style="visibility: hidden" onmouseout="hideLink('test1')" onmouseover="showLink('test1')">
<a href="#" class="menuItem">
Hallo1
</a>
<a href="#" class="menuItem">
Hallo2
</a>
</div>Sowas geht aber auch mit (fast) reinem css. Hier einer der Klassiker mit Erklärungen:
http://www.alistapart.com/articles/dropdowns/
Gruß
Antipitch
-
-
Hello out there!
<div id="test1" class="menu" style="visibility: hidden" onmouseout="hideLink('test1')">
Keine gute Idee! Nutzer mit UAs ohne JavaScript bekommen so die Links nie zu sehen. Die 'visibility' darf deshalb erst mit JavaScript auf 'hidden' gesetzt werden:
window.onload = function () {hideLink('test1');};Und 'style'-Attribute sind wegen Unübersichtlichkeit des Quelltextes auch keine gute Idee.
<a href="menuItem">
Hallo1
</a>
<a href="menuItem">
Hallo2
</a>„Ich möchte furchtbar gern eine Liste sein. Bitte bitte lass mich doch!“ (frei nach wahsaga)
<ol id="test1" class="menu" onmouseout="hideLink('test1')"> <li><a href="menuItem">Hallo1</a></li> <li><a href="menuItem">Hallo2</a></li> </ol>See ya up the road,
Gunnar--
„Und [dieses Forum] soll […] auch ein Fachforum bleiben und kein Psychologieforum werden.“ (Kirsten Evers)-
Keine gute Idee! Nutzer mit UAs ohne JavaScript bekommen so die Links nie zu sehen. Die 'visibility' darf deshalb erst mit JavaScript auf 'hidden' gesetzt werden:
window.onload = function () {hideLink('test1');};Ok, werde ich machen.
Und 'style'-Attribute sind wegen Unübersichtlichkeit des Quelltextes auch keine gute Idee.
<a href="menuItem">
Hallo1
</a>
<a href="menuItem">
Hallo2
</a>Meinetwegen (nehm ich auch raus).
„Ich möchte furchtbar gern eine Liste sein. Bitte bitte lass mich doch!“ (frei nach wahsaga)
<ol id="test1" class="menu" onmouseout="hideLink('test1')">
<li><a href="menuItem">Hallo1</a></li>
<li><a href="menuItem">Hallo2</a></li>
</ol>Ich möchte die aber nicht untereinander sondern nebeneinander haben. > See ya up the road, > Gunnar Danke auf jeden Fall-
Hello out there!
„Ich möchte furchtbar gern eine Liste sein. Bitte bitte lass mich doch!“ (frei nach wahsaga)
<ol id="test1" class="menu" onmouseout="hideLink('test1')">
<li><a href="menuItem">Hallo1</a></li>
<li><a href="menuItem">Hallo2</a></li>
</ol>> > Ich möchte die aber nicht untereinander sondern nebeneinander haben. Dein Wunsch hat nichts mit HTML zu tun. Gar nichts. Mit HTML zeichnest du aus, WAS das Fragment der Struktur nach ist. "menuItem" und "1"/"2" zeigt schon, dass es eine Liste ist; wohl eine geordnete. WIE die Liste dargestellt wird, gibst du mit CSS an. Items nebeneinander entweder mit 'float: left' oder 'display: inline'. Keine Numerierung anzeigen: 'list-style-type: none'. See ya up the road, Gunnar -- „Und [dieses Forum] soll […] auch ein Fachforum bleiben und kein Psychologieforum werden.“ ([Kirsten Evers](https://forum.selfhtml.org/?t=158750&m=1033264))
-
-