Mouse Over im Header über Navigation anzeigen

Remagu · 25 Juli 2016

Guten Tag,

ich bin derzeit dabei einen QR-Code in klein 125 x 125 einzubinden in den Header (logo-container.tpl)

Ausrichtung etc. habe ich alles schon gemacht das klappt auch.

Nun soll beim Drüberfahren mit der Maus aber das bild auf 250x250 vergrößert werden.

Derzeit sieht meine Lösung so aus:

[src=php]
<div class="qrcodemouse_2554">
<div id="qrcodemouse_2554">
<img onmouseover="(src='bilder/qrgross.png')" onmouseout="(src='bilder/qrklein.png')" src="bilder/qrklein.png" alt="" border="0">
</div>
</div>
[/src]

Über die <div> kläre ich derzeit die Position und das es nur in bestimmten Bildschirmauflösungen angezeigt wird.

Es klappt auch, es wird auch vergrößert, allerdings wird der Mouseover von der Navigationsebene abgeschnitten.

Wie kann ich nun, das ganze so einstellen, das es immer über dieser Ebene liegt?

Grüße

electric.larry · 25 Juli 2016

Ist es eine besondere Anforderung, dass du das mit Javascript löst, oder würd eine CSS Lösung für dich auch in Frage kommen?

Ich würd solche Sachen versuchen wenn immer möglich mit CSS zu lösen. Auch Animationen können mit CSS3 sehr elegant umgesetzt werden und du kannst bei neueren Browsern auch auf hardware-beschleunigtes Rendering zählen. Die Performance deiner Seiten ist dann auch, vorallem auf schwächeren mobilen Geräten, weit besser als wenn du mit Javascript arbeitest.

Eine JS Lösung für soetwas würd ich nur dann in Erwägung ziehen, wenn du Uralt-Browser unterstützen musst.

[src=html5]

<html>

<style>

/* standard größe */
#qrcodemouse_2554 img
{
width:125px;
height:125px;

/* wenn das bild über allen anderen elementen stehen soll */
/* nicht unbedingt notwendig */
position:absolute;
z-index:999999;

/* smoothe animation beim aendern der größe */
-webkit-transition: all .5s linear;
-moz-transition: all .5s linear;
-ms-transition: all .5s linear;
-o-transition: all .5s linear;
transition: all .5s linear;

border:none;
}

/* größe bei mouse hover */
#qrcodemouse_2554 img:hover
{
width:250px;
height:250px;
}

</style>

<body>

<div class="qrcodemouse_2554">
<div id="qrcodemouse_2554">
<img src="bilder/qrgross.png" alt="" >
</div>
</div>

</body>
</html>

[/src]

Wenn du den QR Code in einer bestimmten Auflösung gar nicht darstellen möchtest, dann könntest du das mit CSS Media Queries machen. Auch hier gilt, dass das nur möglich ist, wenn du keine veralteten Browser unterstützen musst.

Media Queries sind afaik inline nicht möglich, du müsstest also deine Styles in ein Stylesheet einbinden. Dort könntest du dann soetwas verwenden, wenn du möchtest, dass der QRCode nicht angezeigt wird, wenn die Browser-Breite kleiner als 300 px ist:

[src=css]

@media (max-width: 300px)
{
#qrcodemouse_2554 img
{
display:none;
}
}

[/src]

Jester · 26 Juli 2016

Larry hat es ganz richtig gemacht, zunächst musst Du den QR-Code per position:absolute aus dem Textfluss lösen, dann kann er überhaupt über dem Navigationselement stehen. Das geht nur so, weil durch die Reihenfolge der Elterndivs die Kindelemente des 2. nicht über dem 1. stehen können.

Mit z-index stellst Du das Element dann ganz nach oben, so liegt es auch über der Navi.

Ein Problem könnte noch auftauchen: wenn das Elternelement des QR-Codes position:relative hat. Dann bezieht sich die position:absolute des QR-Codes auf die Position des Elternelements und der gewünschte Effekt tritt nicht ein.

Mouse Over im Header über Navigation anzeigen

Remagu

-unzulässig-

electric.larry

\''; DROP TABLE user; --

Jester

★★★★☆ (Kasparski)