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):
<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 class="panel-grid-cell" id="pgc-27-1-0" >
<div class="so-panel widget widget_sow-image panel-first-child panel-last-child" id="panel-27-1-0-0" data-index="3">
<div class=" so-widget-sow-image-default-3f547a15eaaa sow-image-container so-widget-image panel-widget-style" >
<div class="so-widget-sow-image so-widget-sow-image-default-4333b04dd157"><img src="http://tamuc.de/wp-content/uploads/2016/10/oranger-halbkreis-wer.png" no-repeat width="124" height="57" srcset="" class="so-widget-image" style="padding: 18px 0px 0px 0px;">
</div></div></div></div>
<div class="panel-grid-cell" id="pgc-27-1-1" >
<div class="so-panel widget widget_text panel-first-child panel-last-child" id="panel-27-1-1-0" data-index="4">
<div class="textwidget panel-widget-style" style="font-family: ArcherBold;font-size: 12px;color: #ff8900;padding: 0px 0px 0px 0px;" >
<div class="textwidget">Kontakt
</div></div></div></div>
<div class="panel-grid-cell" id="pgc-27-1-2" >
<div class="so-panel widget widget_sow-image panel-first-child panel-last-child" id="panel-27-1-2-0" data-index="5">
<div class=" so-widget-sow-image-default-3f547a15eaaa sow-image-container so-widget-image panel-widget-style" >
<div class="so-widget-sow-image so-widget-sow-image-default-3f547a15eaaa">
<div class="sow-image-container"><img src="http://tamuc.de/wp-content/uploads/2016/10/oranger-halbkreis-wie.png" width="123" height="66" srcset="" class="so-widget-image" style="padding: 9px 0px 0px 0px;" >
</div></div></div></div></div>
<div class="panel-grid-cell" id="pgc-27-1-3" >
<div class="so-panel widget widget_text panel-first-child panel-last-child" id="panel-27-1-3-0" data-index="6">
<div class="texteditor1startseite panel-widget-style" style="font-family: ArcherBold;font-size: 12px;color: #ff8900;" >
<div class="textwidget">Impressum
</div></div></div></div>
<div class="panel-grid-cell" id="pgc-27-1-4" >
<div class="so-panel widget widget_sow-image panel-first-child panel-last-child" id="panel-27-1-4-0" data-index="7">
<div class=" so-widget-sow-image-default-3f547a15eaaa sow-image-container so-widget-image panel-widget-style" >
<div class="so-widget-sow-image so-widget-sow-image-default-3f547a15eaaa">
<div class="sow-image-container"><img src="http://tamuc.de/wp-content/uploads/2016/10/oranger-halbkreis-wo.png" width="132" height="63" srcset="" class="so-widget-image" style="padding: 9px 0px 0px 0px;" >
</div></div></div></div></div>
<div class="panel-grid-cell" id="pgc-27-1-5" >
<div class="so-panel widget widget_text panel-first-child panel-last-child" id="panel-27-1-5-0" data-index="8">
<div class="texteditor1startseite panel-widget-style" style="font-family: ArcherBold;font-size: 12px;color: #ff8900;" >
<div class="textwidget">AGB
</div></div></div></div>
<div class="panel-grid-cell" id="pgc-27-1-6" >
<div class="so-panel widget widget_sow-image panel-first-child panel-last-child" id="panel-27-1-6-0" data-index="9">
<div class=" so-widget-sow-image-default-3f547a15eaaa sow-image-container so-widget-image panel-widget-style" >
<div class="so-widget-sow-image so-widget-sow-image-default-3f547a15eaaa">
<div class="sow-image-container"><img src="http://tamuc.de/wp-content/uploads/2016/10/oranger-halbkreis-was.png" width="131" height="63" srcset="" class="so-widget-image" style="padding: 9px 0px 0px 0px;" </div></div></div></div></div>
<link rel="stylesheet" id="pgc-27-1" type="text/css" href=hoover-buttons.css"/>und das CSS für den Hover-Effekt (aktueller Stand):
#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!