Hintergrundfarbe eines Elements oder Divs ändern bei Link hover

slickrick13 · 23. November 2017

Hi,

die Überschrift ist recht verwirrend, Sorry. Am besten ich gebe Euch ein Beispiel.

Auf folgender Seite gibt es unter "View our work" und "Get in touch" den Effekt, dass sich der Hintergrund (Farbe) vom kompletten Block ändert, wenn man mit der Maus nur über den Email-Link fährt.

Wie bekomme ich das hin? Ich weiß, wie ich bei einem div per hover die Farbe ändern kann, aber das ist ja nicht das gleiche. Und einem Link eine größere box zu verschaffen ist auch nicht die Lösung.

Vielen Dank für Eure Hilfe

Rick

Sempervivum · 23. November 2017

Wie diese Seite es macht, weiß ich nicht, aber ich würde es so machen:

Code

<style>
        .triggercontent  {
            display: inline-block;
        }
        #c1 {
          background-color: lightgrey;
        }
        #c2 {
          background-color: lightblue;
        }
        #c1.hovered {
          background-color: darkgrey;
        }
        #c2.hovered {
          background-color: turquoise;
        }
    </style>
    <section class="container" id="c1">
        <p class="content">pthjw</p>
        <p class="triggercontent"
           data-hovercolor="darkgrey">Email</p>
        <p class="content">öhrenjth </p>
    </section>
    <section class="container" id="c2">
        <p class="content">pthjw</p>
        <p class="triggercontent"
           data-hovercolor="blue">Irgend was</p>
        <p class="content">öhrenjth </p>
    </section>
    <script>
        $(".triggercontent").hover(function () {
            $(this).closest(".container").addClass("hovered");
        }, function () {
            $(this).closest(".container").removeClass("hovered");
        });
    </script>

Alles anzeigen

Erfordert jQuery, Du musst es einbinden, damit es funktioniert.

slickrick13 · 23. November 2017

super. danke. Kann ich in dem p class "triggercontent" eine href class "blablabla" einbinden um per css das aussehen des links zu bestimmen?

Sempervivum · 23. November 2017

Natürlich, man kann ja dem selben Element mehrere Klassen zuweisen.

Sempervivum · 23. November 2017

Du kannst die Farben auch weich überblenden:

Code

        .container {
            transition: background-color 1s;
        }

slickrick13 · 23. November 2017

Ok, das hab ich so weit verstanden. Aber ich bin einfach zu blöd dafür. Wie lasse ich jetzt den anderen text, der nicht getriggert ist, die Farbe wechseln, wenn der getriggerte gehovert wird? Verständlich? Wie es auf der Beispielseite ist.

Sempervivum · 23. November 2017

Oh, mir scheint ich hatte dein Posting #3 nicht richtig verstanden. Meinst Du das "Get in Touch" und die Emailadresse, die ebenfalls die Farbe ändern? Für alle Elemente im Container, bzw, Kindelemente des Containers, braucht man nur das CSS zu erweitern:

Code

        #c1.hovered p:first-child {
            color: blue;
        }
        #c1.hovered p.triggercontent {
            color: red;
        }

slickrick13 · 24. November 2017

Vielen Dank, Sempervivum

Ich hab´s soweit geschafft. Allerdings ist mein coding wohl eher mehr als bescheiden. Wahrscheinlich habe ich mit allen Regeln gebrochen und alles ziemlich verkompliziert. Aber es funktioniert.

Hintergrundfarbe eines Elements oder Divs ändern bei Link hover

Jetzt mitmachen!

Teilen