✔ OnMouseOver mit CSS - Text soll bestehen bleiben...

T

Trash

Erfahrenes Mitglied
Hallo,
ich habe folgendes Problem. Auf meiner Seite habe ich eine Menüleiste die einen OnMouseOver Effekt bekommen soll. Dieser Effekt soll so aussehen, dass z.B. in einer definierten Div-Boxs unter dem Menü je nach aktiviertem Menüpunkt zusätzlicher HTML-Text erscheinen soll.

z.B. würde dann in dieser Div-Box je nach aktiviertem Menüpunkt ein anderer Text erscheinen. Da dieser Text allerdings Links beinhaltet soll dieser Text eben so lange angezeigt werden, bis entweder ein anderer Menüpunkt aktiviert wurde oder die bereits zusätzlich angezeigte Box mit der Maus verlassen wird.

Habt ihr für mich ein Code-Snippet?

Danke!
 
moin,
erstmal vielen Dank für den Link. Ich habe nun folgenden Code daraus gebastelt:

Code: 
.menu {
	//padding-left: 10px;
	//padding-bottom: 45px;
}
.menu div {
	position: relative;
}
menu img {
	border-width: 0;
	vertical-align: baseline;
}
.menu a {
	text-decoration: none;
	color: #000;
}
._menu a span {
	display: none;
	position: absolute;
	left: 0;
	top: 32px;
	margin-top: 5px;
	font-family: 'Helvetica Neue', Verdana , Arial;
	font-variant:small-caps;
	font-weight:lighter;
	font-size: 1.5em;
}
.menu a:hover {
	border-width: 0;
}
.menu a:hover span {
	display: block;
}

Das funktioniert auch ganz gut. Den Code den ich nun benutze ist der folgende:

HTML: 
<div class="menu"><div>

<a href="javascript:void(0)" onMouseOver="document.images.navigation_a.src='images/navigation/navigation_a_active.gif'" onMouseOut="document.images.navigation_a.src='images/navigation/navigation_a.gif'"><img class="navigation_pic" src="http://www.tutorials.de/images/navigation/navigation_a.gif" name="navigation_a" alt="a"/><span>test</span></a>

</div></div>

Wenn ich nun über den Buchstaben gehe, wird dieser highlighted und der Text der in <span> steht wird angezeigt. Nun kann es aber sein, dass der Text in span einen Link enthält...wie bekomme ich es also hin, dass der Teil, der in <span> auch angezeigt wird, wenn ich mit der Maus über den Text, der in <span> steht, fahre...

Danke
 
Trash hat gesagt.:
Nun kann es aber sein, dass der Text in span einen Link enthält...
Zum Vergrößern anklicken....
Darf aber nicht sein, denn in einem <a>-Element darf kein weiteres <a> folgen, auch nicht inmitten eines <span>-Elements -> http://de.selfhtml.org/html/referenz/elemente.htm#a

Trash hat gesagt.:
wie bekomme ich es also hin, dass der Teil, der in <span> auch angezeigt wird, wenn ich mit der Maus über den Text, der in <span> steht, fahre...
Zum Vergrößern anklicken....
http://www.brunildo.org/test/cssPopMenus.html

... erwähnte ich diese Variante nicht? ;-]

Du nutzt stattdessen eine verschachtelte Listenstruktur, in der das <ul>-Element jeweils eine Menüebene auszeichnet, und auch weitere <a>-Elemente enthalten darf.

HTML: 
<ul>
  <li>Hauptmenüpunkt 1
    <ul>
        <li>Untermenüpunkt 1.1</li>
        <li>Untermenüpunkt 1.2</li>
    </ul>
  </li>
  <li>Hauptmenüpunkt 2
    <ul>
        <li>
          <p>Ein Textabsatz, der einen <a href="">Verweis</a> enthält.</p>
        </li>
    </ul>
  </li>
</ul>

Anleitungen, Anregungen und Demos zu sog. "Dropdown-/up-, Dropfly-, Dropline-Menüs" findest du u.a. hier:

 
Zuletzt bearbeitet:
moin,
danke. Ich werde es nachher mal zu Hause ausprobieren. Da bei mir unter dem Menüpunkt in einer 2. Zeile die anderen Menüpunkte wahrscheinlich horizontal ausgerichtet sein sollen, muss ich mal gucken, wie ich dies definiere bzw. umsetzen kann ;-)
 
moin Danke. Durch etwas tüfteln habe ich es nun hinbekommen. Allerdings habe ich noch eine letzte Frage.

Ich habe im oberen Menü Bilder, die per onmouseout/onmouseover wechseln. Fährt der Nutzer über diese Bilder öffnet sich das Untermenü, welches ja nun in CSS gebaut wurde. Geht der Nutzer dann mit der Maus aber auf das Untermenü verliert das obere Menü natürlich den Fokus und das andere Bild erscheint. Liegt das daran, dass ich den onmouseover an dem LINK und nicht am <ul> platziert habe?! Geht das?!

EDIT:
Kommando zurück. Habe nun das onmouseover am <ul> !

DANKE!
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück