Snafu: :hover andere Id ansprechen

Beitrag lesen

Hallo!

Also mein HTML sieht so aus:
...
vielleicht hilft das was, bei der Lösungsfindung.

Die Lösung sollst _DU_ finden nicht wir!
Ich hab dir schon gesagt wie es geht, du musst es halt nur auf UL umändern.
Weil ich es aber satt habe für meinen morgigen Mathe Test zu lernen geb ich dir ein Beispiel.

Du sollst aber verstehen _warum_ es funktionniert  und nicht nur dumm abschreiben.

Gib z.B. mal der UL ein padding, warum funktionniert es jetzt nicht mehr richtig? Warum kannst du aber problemlos ein Margin setzen?
Wieso geht es nicht richtig wenn LI margin oder padding > 0 hat?
Wieso habe ich das UL-Element mit der :hover Pseudoklasse genommen und nicht das LI-Element? Spiel dich mal damit und gib evtl den Elementen einen Border damit du siehst wie ihre Dimensionen sind und versuch es zu verstehen, so schwer ist es nicht.
BTW im IE6 geht es nicht, IE7 sollte :hover für alle ELemente eigtl akzeptieren.
------------------------

<html>  
<head>  
<title>ksdl</title>  
<style type="text/css">  
#foo {  
  padding:0;  
  width:106px;  
  list-style-type:none;  
 }  
#foo img {  
  margin:0;  
  padding:0;  
  opacity:0.1;  
 }  
#foo:hover img {  
  opacity:0.5;  
 }  
#foo:hover img:hover {  
  opacity:0.1;  
 }  
</style>  
</head>  
<body>  
<ul id="foo">  
 <li><img src="http://src.selfhtml.org/logo.gif" alt="1" /></li>  
 <li><img src="http://src.selfhtml.org/logo.gif" alt="1" /></li>  
 <li><img src="http://src.selfhtml.org/logo.gif" alt="1" /></li>  
 <li><img src="http://src.selfhtml.org/logo.gif" alt="1" /></li>  
</ul>  
</body>  
</html>
--
LG,
Snafu