#1 Linkeffekte von Wolfgang 04.09.2013 19:42

avatar

Hallo Florian,
ist es möglich die Grafik nur beim Mouseover des Link zu vergrößern?
Ich habe es bis jetzt nur so hinbekommen, dass beim Mouseover der Grafik, die Grafik vergrößert wird.

<style>
.forum_top img:hover{width:35px;}
.forum_top img {width:30px;position:absolute;left:0px;}
.forum_top span {position:absolute;margin:7px 0 0 35px;text-decoration:underline;cursor:pointer;}
.forum_box{white-space: nowrap;text-align:left;height:30px;}
</style>

<div class="forum_box">
<a class="forum_top" title="Die besten und hilfreichsten Tricks & Tipps aus dem Forum!" href="http://www.hilfe-tricks-tipps.de/t51f32-...esem-Forum.html">
<img src="http://www.bilder-hochladen.net/files/jrax-n-3769.png"><span>Top 20 aus diesem Forum</span></a>
</div>



Gruß
Wolfgang

#2 RE: Linkeffekte von florian-zier 08.09.2013 22:38

avatar

Hallo Wolfgang,
leider wird das Pseudo-Element :hover nicht immer mit allen Details erklärt. Aber es kann im Prinzip an einer beliebigen Stelle des Selektors auftreten, muss also nicht unbedingt am Ende stehen. Somit kann per CSS auch das Hovern eines übergeordneten Elementes vorausgesetzt werden, um beinhaltetete Elemente zu stylen.

Das bedeutet also, dass hover auf dem kompletten Link (also Text und Bild) vorausgesetzt wird, aber der Style dennoch nur auf dem Bild innerhalb angewendet wird. Hier mal ein funktionierender Beispiel-Selektor:

1
2
3
 
.forum_box a.forum_top:hover img {
width: 35px;
}
 


Der Selektor ist wohl ausführlicher als nötig (".forum_top:hover img" sollte auch reichen), aber so kann man auch ohne den Quellcode zu sehen die Struktur des Links mit enthaltenem IMG-Element erkennen.

#3 RE: Linkeffekte von Wolfgang 09.09.2013 17:34

avatar

Super,
es klappen beide Variationen!

Gewusst wie! Danke, Danke!

Xobor Forum Software von Xobor
Einfach ein eigenes Forum erstellen
Datenschutz