HTML/CSS MouseOver

[neicooo]

Ich habe folgende Problematik. Eines vorneweg, ich beschäftige mich erst wenige Wochen mit dem ganzen Thema, ich habe auch schon mehrere Sachen rumprobiert, ich komme aber auf keine Lösung.

Ich würde gerne in einem Feld, welches bei Mouseovver erscheint eine Liste oder auch verschiedene Absätze oder Überschriften einfügen, aber irgendwie bekomme ich das nicht wirklich hin.

Den Mosueover mit einem normalen Text bekomme ich hin und zwar so:

HTML:

 <p class="popup">Hier soll ein PopUp erscheinen  
<span>test</span>  
  
<p>

CSS:

p.popup  
{  
position:relative;  
z-index:1;  
}  
  
p.popup:hover  
{  
z-index:2;  
}  
  
p.popup span{  
display: none;  
}  
  
p.popup:hover span  
{  
display:block;  
position:absolute;  
top: 30px;  
left: 0px;  
} 

Möchte ich aber jetzt in dem Popup mehr als nur einen einfachen Text habe, funktioniert mein Mouseover nicht mehr wie gewollt, wo liegt mein Fehler?

HTML:

<p class="popup">Hier soll ein PopUp erscheinen  
<ul>  
<li>Punkt1</li>  
<li>Punkt2</li>  
</ul>  
<p>

CSS:

p.popup {  
position:relative;  
z-index:1;  
}  
  
p.popup:hover {  
z-index:2;  
}  
  
p.popup ul {  
display: none;  
}  
  
p.popup:hover ul {  
display:block;  
position:absolute;  
top: 30px;  
left: 0px;  
} 

Was mache ich falsch?

[calien666]

Punkt 1) Du hast deinen Paragrahpen nicht geschlossen.
Punkt 2) eine "unsortet list" kann nicht innerhalb eines Paragraphen stehen. Ersetze deinen Paragraphen durch einen Div-Container und es funktioniert.

  
<div class="popup">Hier soll ein PopUp erscheinen  
<ul>  
<li>Punkt1</li>  
<li>Punkt2</li>  
</ul>  
</div>  

  
.popup {  
position:relative;  
z-index:1;  
}  
  
.popup:hover {  
z-index:2;  
}  
  
.popup ul {  
display: none;  
}  
  
.popup:hover ul {  
display:block;  
position:absolute;  
top: 30px;  
left: 0px;  
}  

[Aleph Systems]

<p></p> Tags sind nur für Textinhalte und Bilder vorgesehen. <div></div> Tags sind für diesen Einsatz das Mittel der Wahl.

Für Popups eignet sich aber Javascript besser als CSS. Ich empfehle jQuery , mit diesem Framework kann man einfach Popup-, Hover- und Animationseffekte erzeugen, ohne Javascript selbst als Sprache lernen zu müssen.

Die Chrome Entwicklertools ganz hilfreich, um festzustellen welche Style Definitionen was bewirken.

______________

aleph-systems.de

[Matthias Apsel]

Om nah hoo pez nyeetz, Aleph Systems!

Leider eine wenig hilfreiche Antwort, keine Werbung für deine Agentur.

<p></p> Tags sind nur für Textinhalte und Bilder vorgesehen. <div></div> Tags sind für diesen Einsatz das Mittel der Wahl.

Ich denke, dir ist der Unterschied zwischen Tag und Element nicht vollständig klar.

Merke: Div-Elemente sind für HTML5-Dokumente niemals das Mittel der Wahl. Sie sind nur aus Nostalgiegründen nicht deprecated. "The div element represents nothing at all." "Authors are strongly encouraged to view the div element as an element of last resort, for when no other element is suitable. Use of more appropriate elements instead of the div element leads to better accessibility for readers and easier maintainability for authors."

Für Popups eignet sich aber Javascript besser als CSS.

JavaScript ist für die Umsetzung von Programmieraufgaben innerhalb von Internetseiten verantwortlich, etwa um zu prüfen ob ein Formular gültig ausgefüllt wurde, und auch hier übernimmt HTML selbst teilweise diese Aufgabe. Denke beispielsweise an das required-Attribut

Ich empfehle jQuery , mit diesem Framework kann man einfach Popup-, Hover- und Animationseffekte erzeugen, ohne Javascript selbst als Sprache lernen zu müssen.

Das ist auch aus SEO-Sicht nicht die beste Wahl und hängt sehr vom Umfang der Seite ab.

Die Chrome Entwicklertools ganz hilfreich, um festzustellen welche Style Definitionen was bewirken.

Dies kann man gelten lassen, obgleich es keine gute Idee ist, im Chrome Seiten zu entwickeln (webkit ist der neue IE6). Alle anderen großen Browser bringen auch Entwicklertools mit.

Matthias