Bildwechsel bei Hover mit CSS

OXO

Hallo zusammen,

ich binde in meinem Menü über einen Link einen Anchor ein. Dieser Anchor enthält ein Bild, das über ein CSS mit Background-URL geladen wird. Soweit so gut.

Beim Hover auf dem Anchor (a:hover) lade ich nun ein neues Bild, das ebenfalls über ein Background-URL dargestellt wird.

Hier entsteht leider ein nicht so schöner effekt, denn bis das Hover-Bild das erste Mal dargestellt/geladen wird, verschwindet das ursprüngliche Bild und es wird für kurze Zeit dann kein Icon angezeigt und es führt damit dann auch zu einem leichten Flackern.

Frage: kann ich irgendwie das Laden der Bilder erzwingen (Pre-Load), oder gibt es sonst noch Möglichkeiten, wie ich diesen Bild-Wechsel bei a:hover sauber hinbekommen kann?

Werbepost

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

Thorsten Gruber

hast du mal einen link parat ?

OXO

PHP:

PHP

...
<ul id="menu_icons"><!-- menu icons -->
    ...
    <li class="menuicon_link"><a class="contact_icon" href="../contact" title="<?php bloginfo('name'); ?> Kontakt"></a></li>
</ul>
...

CSS:

Code

.menuicon_link {
        list-style-type:none;}


.contact_icon {
        background: url('images/contact.png') no-repeat;
        z-index: 10; position: relative; top: -20px;
        height: 25px; width: 30px; float: left; 
        margin: 0px 0px 0px 0px; padding: 0px 0px 0px 5px;}
        
.contact_icon:hover{
        background: url('images/contact_hover.png') no-repeat;
        z-index: 10; position: relative; top: -20px;
        height: 25px; width: 30px; float: left; 
        margin: 0px 0px 0px 0px; padding: 0px 0px 0px 5px;}

Alles anzeigen

OXO

Ich hab mich jetzt CSS-Technisch für eine andere Lösung entschieden. Zunächst einmal habe ich anstatt zweier verschiedener Bilder nur noch eines, das aber beide Bilder in einem vereint (eines oben, das andere unten).

Dann wird im CSS eben nur noch das eine Bild beim Hover-Effekt oben und das andere eben unten angezeigt. So bleibt das Verzögern beim Laden eines neuen Bildes aus und es ändert sich für das einzig geladene nur die Position:

Code

.contact_icon {
        background: url('images/contact_gesamt.png') no-repeat;
        background-position: top;
        z-index: 10; position: relative; top: -20px;
        height: 25px; width: 30px; float: left; 
        margin: 0px 0px 0px 0px; padding: 0px 0px 0px 5px;}
        
.contact_icon:hover{
        background: url('images/contact_gesamt.png') no-repeat;
        background-position: bottom;
        z-index: 10; position: relative; top: -19px;
        height: 25px; width: 30px; float: left; 
        margin: 0px 0px 0px 0px; padding: 0px 0px 0px 5px;}

Alles anzeigen

hero-master

[FONT=Arial]Hi,
die Lösung ist schon mal ganz gut, noch zwei Dinge dazu:

Im HTML-Markup solltest du den Links dennoch einen Inhalt mitgeben:

PHP

<ul id="menu_icons"><!-- menu icons -->
    ...
    <li class="menuicon_link"><a class="contact_icon" href="../contact" title="<?php bloginfo('name'); ?> Kontakt">Kontakt</a>Kontakt</li>
</ul>

und es dann per CSS verschwinden lassen, z.B. so:

Code

.contact_icon { text-indent: -2000px }

Dann kannst du die Dinge, die du für den "a"-Tag definiert hast, bei der Pseudoklasse weglassen, die gleich bleiben sollen[/FONT][FONT=monospace][FONT=Arial]:[/FONT][FONT=Arial]

Desweiteren bringt es wenig die Links zu floaten, das bringt dir gar nichts. Du musst die Listenpunkte floaten, wenn du sie nebeneinander stehen haben willst. position: relative und der z-index-Wert macht auch keinen Sinn für Links. Auch hier: Nur wenn du sie brauchst: definiere sie für das list-item oder die Liste:

[/FONT][/FONT]

Code

.contact_icon {
        background: [URL="http://forum.wordpress-deutschland.org/lexikon/?do=showentry&item=url"]url[/URL]('images/contact_gesamt.png') no-repeat;
        background-position: top;
        margin-top: -20px;
        height: 25px; 
        width: 30px;
        display: block; 
        padding: 0 0 0 5px;
        text-indent: -2000px
}
        
.contact_icon:hover{
        background-position: bottom;
        margin-top: -19px
}

Alles anzeigen

kaiser

aber um auf dein eigentliches problem zurück zu kommen: background-position verwenden also

Code

.bla { background: #farbe-hex-code url(usw/bla.png) no-repeat 0px 0px;
.bla:hover { background: #farbe-hex-code url(usw/bla.png) no-repeat 0px XYpx;

du verschiebst also mittels "sliding doors" beim hovern nur den hintergrund entlang der x oder y-Achse.

OXO

Okay, super! Vielen Dank für Eure Hilfe! Dann werde ich das mal noch bei mir etwas umbauen...

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Bildwechsel bei Hover mit CSS

Jetzt mitmachen!