Hovern über ein Objekt soll Opacity von einem anderen Objekt ändern

  • Hey,

    Ich würde gerne einem Objekt die Anweisung geben, dass sobald man darüber hovert ein anderes Objekt die Opacity auf 0 setzt.

    Ich hoffe ihr versteht was ich meine.

    Danke im Voraus !

  • Hallo Aventrux,

    ich glaube nicht, dass das allein mit css funktioniert.

    Aber so müsste es funktionieren:

    HTML
    <!-- Dein Objekt in HTML. Als Beispiel ein Button -->
    <input type="button" id="obj_1"/>
    <!-- Dein zweites Objekt -->
    <div id="obj_2">
        <input type="button"/>
    </div>
    JavaScript
    document.getElementById('obj_1').addEventListener('mouseover', set_obj2_Opacity_to_0);
    document.getElementById('obj_1').addEventListener('mouseout', set_obj2_Opacity_to_1);
    function set_obj2_Opacity_to_0()
    {
        document.getElementById('obj_2').innerHTML = '<input type="button" style="Opacity: 0;"/>';
    }
    function set_obj2_Opacity_to_1()
    {
        document.getElementById('obj_2').innerHTML = '<input type="button" style="Opacity: 1;"/>';
    }

    Mit freundlichen Grüßen


    Justus

  • Das geht relativ leicht auch mit CSS aber mit Einschränkungen bzgl. der Anordnung:

    • Das zweite Element muss ein Geschwisterelement oder ein Kind eines Geschwisterelementes des ersten Elementes sein.
    • Das zweite Element muss nach dem ersten notiert werden.

    Es gibt aber auch einen Vorteil: Mit CSS-Transition oder -Animation können viele Eigenschaften einfach animiert werden.


  • Hey,


    Danke für eure Antworten, leider krieg ich es nicht hin das ganze richtig umzusetzen, vielleicht könnt ihr mir da ja noch mal helfen.


    Ich beschreibe noch mal mit einem Beispiel Code was ich machen möchte:


    HTML:


    CSS:


    Wenn man nun über obj_1 hovert, soll die opacity von obj_2 auf 0 gesetzt werden. Verlässt man obj_1 mit dem Mauszeiger wieder soll die opacity von obj_2 wieder auf 1 gesetzt werden.

    Ich hoffe ihr versteht was ich meine, und würde mich sehr über weitere Antworten freuen.

  • 1. Du hast da zwei Mal das Semikolon vergessen: In Zeile 3 und in Zeile 9.

    2. Damit das Hover funktioniert, kannst Du mein CSS aus #3 fast 1-zu-1 übernehmen, nur verwendest Du jetzt Klassen und musst daher die # durch Punkte ersetzen:

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!