CSS Frage - Bei Mouse Over Untertitel einblenden und DIV Container ausblenden

[stivn.99]

Hallo alle miteinander,

ich habe ein kleines CSS Problem und bin gespannt auf Eure Lösungsvorschläge:

Bei einem Mouseover soll ein Seitenuntertitel eingeblendet werden. Das ganze ist auch kein Problem:

span.navigation_top {
	display:none;
}

*.active a:hover span.navigation_top {
	position:absolute;
	display:block;
	top:100px;
	left:100px;
}

*.navigation_subtitle {
	position:absolute;
	top:100px;
	left:100px;
}

<ul>
<li class="active"><a href="get-informed.0.html">topic 01<span class="navigation_top"><dfn>subtitle 01</dfn></span></a></li>
<li class="active"><a href="get-influence.0.html">topic 02<span class="navigation_top"><dfn>subtitle 02</dfn></span></a></li>
</ul>

<div class="navigation_subtitle">weg damit...</div>

Nun soll aber beim MouseOver der DIV Container mit der Klasse "navigation_subtitle" verschwinden.

Wie kriege ich das hin? Irgendwie komme ich da wirklich nicht weiter :/

Vielen Dank schon jetzt für Eure Hilfe.

Stivn.

 

[Fubbes]

Ich denke, das wird in der Konstruktion mit reinem CSS nicht funktionieren. Also doch wieder zurück zu Javascript und mouseover-Events ...
Die beiden Bereiche liegen doch an derselben Stelle. Wird das navigation_subtitle nicht einfach verdeckt?

Gruß,
Daniel

 

[stivn.99]

Moin Moin,

Javascript kommt nicht in Frage da Barrierefreiheit als Vorgabe gemacht ist.

Aber ich bin ein bisschen weiter gekommen, allerdings ist es alles noch ein Test, darum ein bisschen konfus:

span.navigation_headline, span.navigation_subline {
	position:absolute;
	left:100px;
	top:100px;
	width:200px;
	height:20px;
}

span.navigation_headline {
	visibility:visible;
}

span.navigation_subline {
	visibility:hidden;
}

*.active a:hover span.navigation_subline, *.active a:hover span.navigation_headline {
	position:absolute;
	left:100px;
	top:100px;
	width:200px;
	height:20px;
	border:1px solid #000;
}

*.active a:hover span.navigation_subline {
	visibility:visible;
}

*.active a:hover span.navigation_headline {
	visibility:hidden;
}



<ul>
<li class="active"><a href="">Topic 01<span class="navigation_subline"><dfn>Subline 01</dfn></span><span class="navigation_headline"><dfn>Headline 01</dfn></span></a></li>
<li><a href="">Topic 01</a><span class="navigation_subline"><dfn>Subline 01</dfn></span></li>
</ul>

ABER!!!
Kein Erfolg ohne Fehler... Das ganze funktioniert nicht im IE < 7
Hat jemand eine Ahnung woran das liegen könnte?

Vielen Dank für Eure Hilfe

Stivn.

 

[Fubbes]

Moin Moin,

Javascript kommt nicht in Frage da Barrierefreiheit als Vorgabe gemacht ist.

Da wirfst du aber was durcheinander. Barrierefreihait hat nichts mit Javascript zu tun, sondern erfordert, dass die Seite auch auf Textzeilen oder in reinen Textbrowsern (z.B. links oder lynx) noch zu benutzen ist. Diese ignorieren einfach das Javascript. Natürlich darf Javascript enthalten sein, soweit es nur als "Goodie" zur Verbesserung der Optik in "normalen" Browsern eingesetzt wird. Und genau das willst du mit dem navigation_subtitle doch erreichen. Ziel muss es aber sein, dass alles auch ohne Javascript funktioniert.

Allerdings stimme ich dir zu, dass auch ich erst mal versuchen würde, es mit CSS hinzubekommen. Deinen Code habe ich nicht ausprobiert, er erscheint mir aber plausibel.

Gruß
Daniel