linzprod: :hover andere Id ansprechen

SELF-Forum

:hover andere Id ansprechen

linzprod
– Informationen zu den Bewertungsregeln

Hallo allerseits,

ich hab eine Navigation, die 5 Bilder enthält.
im Normalzustand sollen die Bilder die opacity:1; haben.

wenn man mit der Maus über ein Bild fährt sollen die anderen Bilder die opacity:0.5; haben.

ich hab den Bildern eindeutige Ids vergeben. Kann ich die anderen Ids per css ansprechen? also sowas wie:

#Bild1:hover (#Bild2, #Bild3, #Bild4, #Bild5) {
opacity:0.5;
}

wäre sehr dankbar für eure Hilfe.

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. :hover andere Id ansprechen

    Snafu
    – Informationen zu den Bewertungsregeln

    Hmmm...
    wäre meines Wissens nach nur möglich, wenn die Bilder das übergeordnete Element voll ausfüllen.
    Wenn z.b. alle Bilder in einem DIV-Element sind

      
<div id="foo">  
<img src="1.jpg" alt="1" />  
...  
</div>[/html]  
Sollte es so funktionnieren  
[code lang=css]  
div#foo img {  
  opacity:0.1;  
 }  
div#foo:hover img {  
  opacity:0.5;  
 }  
div#foo:hover img:hover {  
  opacity:0.1;  
 }

    Sonst wüsste ich nicht wie man es machen könnte.

    --
    LG,
    Snafu
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. :hover andere Id ansprechen

      linzprod
      – Informationen zu den Bewertungsregeln

      Also mein HTML sieht so aus:

      <ul>
      <li><a href="seite1.php" target="_self"><img src="images/Bild1.gif" id="Bild1"/></a></li>
          <li><a href="seite2.php" target="_self"><img src="images/Bild2.gif" id="Bild2"/></a></li>
          <li><a href="seite3.php" target="_self"><img src="images/Bild3.gif" id="Bild3"/></a></li>
          <li><a href="seite4.php" target="_self"><img src="images/Bild4.gif" id="Bild4"/></a></li>
          <li><a href="seite5.php" target="_self"><img src="images/Bild5.gif" id="Bild5"/></a></li>
      </ul>

      vielleicht hilft das was, bei der Lösungsfindung.

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. :hover andere Id ansprechen

        MudGuard Homepage des Autors
        – Informationen zu den Bewertungsregeln

        Hi,

        <ul>
        <li><a href="seite1.php" target="_self"><img src="images/Bild1.gif" id="Bild1"/></a></li>
            <li><a href="seite2.php" target="_self"><img src="images/Bild2.gif" id="Bild2"/></a></li>
            <li><a href="seite3.php" target="_self"><img src="images/Bild3.gif" id="Bild3"/></a></li>
            <li><a href="seite4.php" target="_self"><img src="images/Bild4.gif" id="Bild4"/></a></li>
            <li><a href="seite5.php" target="_self"><img src="images/Bild5.gif" id="Bild5"/></a></li>
        </ul>

        ul:hover img { opacity:0.5; }
        ul img:hover { opacity:1; }

        (Reihenfolge der Rulesets ist wichtig!)

        Setzt einen einigermaßen fähigen Browser voraus (sprich: IE 6 ist außen vor, ob IE 7 opacity kann, weiß ich nicht).

        cu,
        Andreas

        --
        Warum nennt sich Andreas hier MudGuard?
        O o ostern ...
        Fachfragen unaufgefordert per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.
        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

      2. :hover andere Id ansprechen

        Snafu
        – Informationen zu den Bewertungsregeln

        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
        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

        1. :hover andere Id ansprechen

          Snafu
          – Informationen zu den Bewertungsregeln

          Achso, deine Bilder sollen im Normalzustand Opacity 1 und nciht 0.1 haben.
          Spiel dich trotzdem damit :P

          --
          LG,
          Snafu
          Beitrag melden
          –
          Informationen zu den Bewertungsregeln

          1. :hover andere Id ansprechen

            linzprod
            – Informationen zu den Bewertungsregeln

            und im IE funktioniert's mit

              
filter:alpha(opacity=100);
            Beitrag melden
            –
            Informationen zu den Bewertungsregeln

        2. :hover andere Id ansprechen

          linzprod
          – Informationen zu den Bewertungsregeln

          Vielen Dank,

          hat ein wenig gedauert, aber ich hab's nun endlich kapiert.

          schönen Abend.

          Beitrag melden
          –
          Informationen zu den Bewertungsregeln

    2. :hover andere Id ansprechen

      linzprod
      – Informationen zu den Bewertungsregeln

      hi snafu,

      sorry, ich verstehe deine überlegung nicht ganz.

      habe noch mein html gepostet, vielleicht bringt das was.

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln