jjhh: Hintergrundbild (div) bei hover ändern

Beitrag lesen

SELF-Forum

Hintergrundbild (div) bei hover ändern

jjhh
– Informationen zu den Bewertungsregeln

Hallo Patrick,

vielen Dank für die Nachricht, die mir schon mal ein wenig weiterhilft.
Ich habe ein DIV verwendet, da ich den Hintergrund auf dem Bildschirm (egal was für einem) horizontal und vertikal zentrieren wollte. Hier der komplette CSS Code:

  
body  
	{  
	margin: 0;  
	padding: 0;  
	text-align: center;  
	}  
  
#horizon  
	{  
	background-color: transparent;  
	text-align: center;  
	position: absolute;  
	top: 50%;  
	left: 0px;  
	width: 100%;  
	height: 1px;  
	overflow: visible;  
	display: block;  
	}  
  
#background  
	{  
	margin-left: -440px;  
	position: absolute;  
	top: -247.5px;  
	left: 50%;  
	width: 880px;  
	height: 495px;  
	visibility: visible;  
	background-image: url(../Images/luftbalon.gif);  
	background-repeat: no-repeat;  
	text-align: left;  
	}  
ul#Navigation {  
    margin-top: 100px;  
	margin-left: 50px;  
	width: 140px;  
	padding: 0;  
  }  
ul#Navigation li {  
    list-style: none;  
    margin: 0;  
	padding: 0;  
	overflow:hidden;  
	width: 140px;  
	height: 20px;  
}  
  
  
ul#Navigation li a:hover {  
	position: relative;  
	top:-20px;  
		  
}

Und HTML:

  
</head>  
<body>  
<div id="horizon">  
 <div id="background">  
  	<ul id="Navigation">  
    <li><a href="index.html"><img src="Images/Navigationsleiste/Home_neu.png" border="0"></a></li>  
    <li><a href="#"><img src="Images/Navigationsleiste/Text_neu.gif" border="0"></a></li>  
    <li><a href="#"><img src="Images/Navigationsleiste/übersetzung_neu.gif" border="0"></a></li>  
  </ul>  
 </div>

Also wenn ich Dich richtig verstanden habe, dann komme ich mit :hover nicht weiter, wenn ich über ein Item der Navigationsliste mit der Maus fahre und dann das Hintergrundbild des DIV-Tags "background" ändern möchte.
Wie müsste dann der JavaScript Code aussehen? Müsste ich dann mit onmouseover etc. arbeiten oder kann das vermieden werden? Ich wollte eigentlich so wenig JavaScript wie möglich verwenden - am liebsten gar keines... :-)

Vielen Dank!
Viele Grüße
Julia

Hallo jjhh!

»» Nun ist es aber so, dass ich bei a:hover auch das Hintergrundbild des <div> tags ändern möchte. Ist das irgendwie mit CSS möglich? Oder muss ich da Javascript hinzuziehen? GetElementbyID?
»» Wie müsste der Code dann aussehen?

Du kannst mit CSS in Elementen enthaltene Elemente selektieren:

ul#Navigation li a:hover {...}

Du kannst aber nicht, z.B. bei einer Aktion wie das Hovern, von einem Element auf einem seiner Vorfahren zurückgreifen.

Du müsstest also für die Liste (<ul>) selbst eine Formatierung angeben, die beim Hovern greifen soll:

ul#Navigation:hover {...} /*wird im IE <= 6 nichts bewirken, kennt :hover nur für Links*/

Wenn Du vorhast, dass bei jedem Hovern über jeweils einen Link jeweils einen anderen  Hintergrund für die ganze Liste auszutauschen, wird es mit reinem CSS derzeit nicht gehen. Da waren die Stichworte JavaScript und getElementByID schon richtig.

Ich spreche hier deswegen von Liste, und nicht von DIV, weil: Kommen weitere Navigationslisten, die Du in Deinem DIV »background« gruppieren willst? Wenn nicht, also wenn Du nur eine Liste hast, ist das DIV überflüssig: Du kannst die Liste direkt formatieren.

Viele Grüße aus Frankfurt/Main,
Patrick

Beitrag melden
–
Informationen zu den Bewertungsregeln