✔ Menü Doppel-Hover

Status
Nicht offen für weitere Antworten.
M

Magxi

Grünschnabel
Hallo erstmal.

Mein Problem ist folgendes : Ich habe rechts einen Link und links eine blaue Box, die sich farblich verändern soll, wenn ich über den Link daneben gehe.
Ich habe schon einmal angefangen, aber dies klappt leider nicht.

Ich habe es mal hochgeladen, damit man weiss, was ich meine:

http://www.malte-becker.de/test.html

hoffe externe Links sind oke.
Ansonsten, hab ich es nochmal als Anhang drangehängt

außerdem hoffe ich, dass mir jemand helfen kann.
Danke schonmal.

Edit : keine Ahnung warum der Beitrag ins javascript forum verschoben wurde... weil javascript nicht zum einsatz kommen darf
 

Anhänge

Zuletzt bearbeitet:
Hi,

in dieser Konstellation ist für dein Vorhaben Javascript erforderlich, um das benachbarte Element ansprechen zu können.

Code: 
<div id="divBackground">
                <div class="divMenuIcon" id="divMenuIcon1"></div><div class="divMenuTitle"><a href="#" onmouseover="document.getElementById('divMenuIcon1').style.background='#000000'" onmouseout="document.getElementById('divMenuIcon1').style.background='#cedcee'">Link 1</a></div>
                <div class="divMenuIcon" id="divMenuIcon2"></div><div class="divMenuTitle"><a href="#" onmouseover="document.getElementById('divMenuIcon2').style.background='#000000'" onmouseout="document.getElementById('divMenuIcon2').style.background='#cedcee'">Link 2</a></div>
                <div class="divMenuIcon" id="divMenuIcon3"></div><div class="divMenuTitle"><a href="#" onmouseover="document.getElementById('divMenuIcon3').style.background='#000000'" onmouseout="document.getElementById('divMenuIcon3').style.background='#cedcee'">Link 3</a></div>
                <div class="divMenuIcon" id="divMenuIcon4"></div><div class="divMenuTitle"><a href="#" onmouseover="document.getElementById('divMenuIcon4').style.background='#000000'" onmouseout="document.getElementById('divMenuIcon4').style.background='#cedcee'">Link 4</a></div>
</div>
Zudem muss eine ID in einem Dokument eindeutig sein, und darf daher darin nicht mehrmals vergeben werden. Daher hab ich hier im Quellcode-Auszug die IDs divMenuIcon und divMenuTitle in Klassen umgewandelt, was du im Stylesheet entsprechend abändern musst.
 
also kann ich keine benachbarten Elemente ohne Javascript, nur mit css ansprechen ?

Irgendeine andere Möglichkeit ? Umstellungen ?

danke
 
Grundsätzlich müsste die Box ein Nachfahreelement des Links sein, um sie mit CSS ansprechen zu können:

Code: 
#menu {
width:200px;
}

#menu span {
float:right;
width:178px;
height:20px;
background:#cedcee;
}

#menu .MenuIcon {
display:inline;
width:20px;
height:20px;
background:#cedcee;
margin-right:2px;
}

#menu .menuPoint a:hover {
border:none;
}

#menu .menuPoint a:hover .MenuIcon {
background:#000;
}
Code: 
<div id="menu">
     <div class="menuPoint"><a href="#"><span>link 1</span><span class="MenuIcon"></span></a></div>
</div>
 
hallo, danke das hat mir schonmal sehr weiter geholfen

Code: 
<html>
<head>
	<title>test</title>
	<style type="text/css">
	




      p {
            margin-bottom: 2px;
     }

	body {
		color: #162953;
		background-color: #EEEFEF;
	}

	a {
		text-decoration: none;
            cursor: pointer;
            
	}

	#divBackground {
		width: 200px;
		height: 88px;
		background-color: #EEEFEF;
		border: solid 1px #dedede;
		padding-top: 2px;
		padding-left: 2px;
		padding-right: 2px;
	}

	#divBackground2 {
		width: 200px;
		height: 66px;
		background-color: #EEEFEF;
		border: solid 1px #dedede;
		padding-top: 2px;
		padding-left: 2px;
		padding-right: 2px;
	}

	.menu {
		width:200px;
            
	}

	.menu span {
		float:right;
		width:178px;
		height:20px;
		background:#cedcee;
		font-family: Verdana;
		color: #272566;
		font-size: 11px;
		line-height: 20px;
		margin-bottom: 2px;
		text-decoration: none;
            
            
	}

	.menu .MenuIcon {
		display:inline;
		width:20px;
		height:20px;
		background:#cedcee;
		margin-right:2px;
	}

	.menu .menuPoint a:hover .MenuIcon {
		background:#a4bfe2;
	}
	
	</style>
</head>
<body>
<b><p>&nbsp;Menue1</p></b>
<div id="divBackground">
	
	<div class="menu">
		<div class="menuPoint"><a href="#"><span>&nbsp;Link1</span><span class="MenuIcon">&nbsp;</span></a></div>
		<div class="menuPoint"><a href="#"><span>&nbsp;Link2</span><span class="MenuIcon">&nbsp;</span></a></div>
		<div class="menuPoint"><a href="#"><span>&nbsp;Link3</span><span class="MenuIcon">&nbsp;</span></a></div>
		<div class="menuPoint"><a href="#"><span>&nbsp;Link4</span><span class="MenuIcon">&nbsp;</span></a></div>
	</div>
		
</div>
<p></p>
<b><p>&nbsp;Menue2</p></b>
<div id="divBackground2">
	
	<div class="menu">
		<div class="menuPoint"><a href="#"><span>&nbsp;Link1</span><span class="MenuIcon">&nbsp;</span></a></div>
		<div class="menuPoint"><a href="#"><span>&nbsp;Link2</span><span class="MenuIcon">&nbsp;</span></a></div>
		<div class="menuPoint"><a href="#"><span>&nbsp;Link3</span><span class="MenuIcon">&nbsp;</span></a></div>
	</div>
		
</div>
</body>
</html>


soweit so gut.. Funktioniert in IE7 und firefox einwandfrei. Aber der IE6 schafft es nicht die Icons zu verfärben...

Irgendeine Lösung?

Danke
Mfg
 
Hi,

erweiter mal das Stylesheet mit der folgenden Regel, die du aus meinem letzten Beispiel nicht übernommen hast:

Code: 
.menu .menuPoint a:hover {
border:none;
}
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück