Hintergrundbild (div) bei hover ändern

[jjhh]

Guten Tag liebe Helfer,
bin bei CSS & Co. noch relativ neu, daher bitte ich um Nachsicht.
Habe folgendes:
in einem <div> habe ich ein Navigationsmenü angelegt (als <ul>). Die einzelnen Buttons der Leiste sind Bilder, die sich bei a:hover ändern. Das war bis jetzt alles kein Problem.
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?

Hier der bisherige Code (Auszüge):
``
#background
{
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;

}
``
<div id="background">
   <ul id="Navigation">
    <li><a href="#"><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>

Vielen Dank für Eure Hilfe!
Grüße
Julia

[jjhh]

Das mit dem Code übe ich nochmal...
Hier der bisherige Code (Auszüge):

  
#background  
 	{  
 	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;  
 		  
}  

  
<div id="background">  
   	<ul id="Navigation">  
     <li><a href="#"><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>  
  

[Patrick Andrieu]

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

[jjhh]

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

[Patrick Andrieu]

Hallo Julia!

Bitte gewöhne Dir einen guten Zitierstil an (kein TOFU), und lasse aus dem Vorposting nur die Stellen stehen, auf welchen Du Dich beziehst.

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.

Nur, wenn Du der Liste eine :hover-Formatierung gibst. Sobald der Mauszeiger sich über den Bereich der Liste befindet, greift das Hovern. Du kannst, wie schon erwähnt, diese Aktion nicht unterschiedlich für jeden Link gestalten, sie gilt dann immer für die komplette Liste - und beim MSIE kleiner als 7 ist sie wirkungslos.

Wie müsste dann der JavaScript Code aussehen? Müsste ich dann mit onmouseover etc. arbeiten oder kann das vermieden werden?

Ja, onmouseover/-out sind die Stichworte. Das Objekt style ein Weiteres:

document.getElementById('...').style.backgroundImage = ...;

Ich wollte eigentlich so wenig JavaScript wie möglich verwenden - am liebsten gar keines... :-)

Dann lieber auf den Effekt verzichten?

Viele Grüße aus Frankfurt/Main,
Patrick

[suit]

Dann lieber auf den Effekt verzichten?

Welcher Effekt überhaupt - ich kann mir grade nicht vorstellen, warum es überhaupt notwendig ist, das Hintergrundbild des Elternelements zu wechseln.

[jjhh]

Hallo Patrick,

Bitte gewöhne Dir einen guten Zitierstil an (kein TOFU), und lasse aus dem Vorposting nur die Stellen stehen, auf welchen Du Dich beziehst.

Was auch immer TOFU im Zusammenhang mit Postings bedeutet - Ich versuche es!

Ja, onmouseover/-out sind die Stichworte. Das Objekt style ein Weiteres:

document.getElementById('...').style.backgroundImage = ...;

Dann mache ich es wohl so. Danke.

Dann lieber auf den Effekt verzichten?

Sehr ungern. Diejenigen, die JavaScript ausgeschaltet haben, werden den tollen Effekt dann eben nicht sehen können.

Danke für die Hilfe.
Viele Grüße
Julia

[Patrick Andrieu]

Hallo jjhh!

Was auch immer TOFU im Zusammenhang mit Postings bedeutet - Ich versuche es!

TOFU ;)

Viele Grüße aus Frankfurt/Main,
Patrick

[ChrisB]

Hi,

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.

Über einen "Umweg" eventuell schon - ein Nachfahrenelement des Links, bspw. ein in ihm enthaltener Span, kann ja auch hinter[1] der Liste *positioniert* werden - und damit die Illusion eines Pseudo-Hintergrundes der Liste liefern. (Eine leichte Abwandlung des Prinzips von Eric Meyers Pure CSS Popups.)

[1] Wenn die Liste auch im normalen Zustand einen Hintergrund haben soll, dann muss man das Span-Element ggf. auf der Z-Ebene zwischen der Liste und den Listenelementen platzieren.

MfG ChrisB