Hover-Effekt mit Tausch der Bilder bei Mouseover

    Hallo zusammen,

    ich habe ein großes Problem, das ich scheinbar nicht lösen kann. Ich mache für einen Bekannte eine Webseite, habe dazu auch ein HTML erstellt und im speziellen nun das Problem, das ich vier Grafiken am Seitenende habe und diese hovern sollen bei Mouseover. Sprich: die orange Grafik soll bei Mouseover durch die graue Grafik ersetzt werden. Aber bei allen Varianten klappt irgendwas nicht... Entweder ZUSÄTZLICH zur orangen Grafik gehen bei Mouseover gleich mehrere graue Grafiken auf, aber auch noch OHNE daß die orangen verschwinden, es ist ein Versatz der Grafiken da, etc.

    Meine Frage ist: wie kann ich nun den Grafiken entsprechend mein CSS gestalten (Stichwort: welcher Selektor?) und wie kann ich die richtige link rel schreiben? Bin eben kein Designer und kein Programmier, komme deshlab auch nicht weiter und bin mit meinem Latein am ENde...

    Dazu hier das HTML (zumindest der aus meinr Siht relevante Teil):

    und das CSS für den Hover-Effekt (aktueller Stand):

    Code
    #pgc-27-1 {
background-image:url("http://tamuc.de/wp-content/uploads/2016/10/oranger-halbkreis-wer.png");


#pgc-27-1:hover {
background-image:url("http://tamuc.de/wp-content/uploads/2016/10/grauer-halbkreis-wer.png") no-repeat;
}

    Kann mir jemand einen Schubs in die richtige Richtung geben? Im Anhang auch noch ein pdf, wie es aussehen sollte.

    Vielen Dank schon mal im voraus!

    • Gerade eben
    • Anzeige

    Hallo!

    Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

    • ✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
    • ✔️ Deutsche Server & DSGVO-konform
    • ✔️ Persönlicher Support (kein 0815-Ticket-System)

    Mehr erfahren

    Hallo,

    du versuchst ein Element anzusprechen, dass es nicht gibt. Im CSS schreibst du #pgc-27-1. In deinem HTML Teil heißt es aber pg-27-1 (ohne das c).

    Du musst außerdem die Größe des Elements festlegen, da es ansich ja leer ist und nur genauso groß sein soll, wie das Hintergrund-Bild.

    Dazu kommt, dass "no-repeat" für "background-image" so nicht erlaubt bzw. nicht möglich ist. Wenn du es kombinieren willst, musst du entweder "background" verwenden oder es in zwei Eigenschaften aufteilen (wie in dem Beispiel unten).


    Versuch es mal so:

    <div class="panel-grid" id="pg-27-1">

    <div class="panel-row-style-so-widget-sow-image-default-3f547a15eaaasow-image-containerso-widget-image so-widget-sow-image-default-3f547a15eaaa sow-image-container so-widget-image panel-row-style" style="width: 964px;position: center;margin-left: 150px;bottom: 0;padding: 0px 0px 0px 0px;"></div>

    </div>


    Und für den CSS Teil:

    #pg-27-1 {
    background-image: url("http://tamuc.de/wp-content/upl…lbkreis-wer.png");
    background-repeat: no-repeat;
    height: 57px;
    width: 124px;
    }

    #pg-27-1:hover {
    background-image:url("http://tamuc.de/wp-content/upl…lbkreis-wer.png");

    }

    Das ist jetzt nur Beispielhaft für eins der Elemente. Das kannst du aber so auch für die anderen Elemente übernehmen.


    Viele Grüße,
    Daniel


    PS: Ich würde dir auch empfehlen, keine inline-styles zu verwenden (also das style="" Attribut). Schreib die stattdessen auch lieber in die style.css

Jetzt mitmachen!

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

Benutzerkonto erstellen Anmelden