Hover-Effekt mit Tausch der Bilder bei Mouseover

rudolfmu · 13. Oktober 2016

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):

Code:
Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
und das CSS für den Hover-Effekt (aktueller Stand):

Code:
Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
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!

danielgoehr · 16. Oktober 2016

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/uploads/2016/10/oranger-halbkreis-wer.png");
background-repeat: no-repeat;
height: 57px;
width: 124px;
}

#pg-27-1:hover {
background-image:url("http://tamuc.de/wp-content/uploads/2016/10/grauer-halbkreis-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

WPDE.org

Hover-Effekt mit Tausch der Bilder bei Mouseover

rudolfmu New Member

Anhänge:

scr footer tamuc.JPG

danielgoehr Well-Known Member

Nützliche Suchen

Hover-Effekt mit Tausch der Bilder bei Mouseover

rudolfmu New Member

Anhänge:

scr footer tamuc.JPG

danielgoehr Well-Known Member