✔ Hover funktioniert nicht

F

fschwarz

Mitglied
Hi,
was passt hier nicht? Bild wird angezeigt, aber leider kein Mouseover....

Code: 
<p>Möchten Sie die Homepage des Systemhauses <strong>blablabla</strong> oder die</p>
<p>Homepage des Ladengeschäfts <strong>blabla</strong> besuchen  ?</p>
<p> </p>
<a href="index.php/blabla" title="blablabla">
    <div class="spotlight" style="background: url(images/stories/effect/swg9.gif) no-repeat scroll 0% 0% transparent; width: 320px; height: 75px; float: left;"></div>
</a> <a href="index.php/ep-swg" title="Homepage von blabla betreten">
<div class="spotlight" style="background: url(images/stories/effect/ep11.png) no-repeat scroll 0% 0% transparent; width: 320px; height: 75px; float: left;onmouseover="this.src='images/stories/effect/ep11_hover.png'" onmouseout="this.src='images/stories/effect/ep11.png'" "></div>
</a>
 
Du hast das (JavaScript-)Event onmouseover in das Style-Attribut geschrieben. Entweder du machst deine CSS-Daten in den Kopf der HTML-Datei oder in eine externe.
 
Dann musst du aber JavaScript verwenden, z.B.:
HTML: 
<div ... onmouseover="jsFunktionOver()" onmouseout="jsFunktionOut()" ...>

Edit: Habe deinen Satz falsch gelesen. Wie gesagt, du musst solche "Funktionen" wie hover in den Kopf der Datei schreiben oder in eine externe Datei. Mit CSS kannst du folgendes machen:
HTML: 
<html>
  <head>
  <style type="text/css">
    #yourDivID
    {
      /* NORMAL */
    }
    #yourDivID:hover
    {
      /* "GEHOVERT" */
    }
  </style>
...
 
Zuletzt bearbeitet:
Hi,

die Event-Handler (onmouseover / onmouseout) haben innerhalb des style-Attributs nichts zu suchen.

HTML: 
<div class="spotlight" style="background: url(images/stories/effect/ep11.png) no-repeat scroll 0% 0% transparent; width: 320px; height: 75px; float: left;" onmouseover="this.src='images/stories/effect/ep11_hover.png'" onmouseout="this.src='images/stories/effect/ep11.png'"></div>


mfg Maik
 
Bzw um deinen Code richtigzustellen:
HTML: 
<p>Möchten Sie die Homepage des Systemhauses <strong>blablabla</strong> oder die</p>
<p>Homepage des Ladengeschäfts <strong>blabla</strong> besuchen  ?</p>
<p> </p>
<a href="index.php/blabla" title="blablabla">
    <div class="spotlight" style="background: url(images/stories/effect/swg9.gif) no-repeat scroll 0% 0% transparent; width: 320px; height: 75px; float: left;"></div>
</a> <a href="index.php/ep-swg" title="Homepage von blabla betreten">
<div class="spotlight" style="background: url(images/stories/effect/ep11.png) no-repeat scroll 0% 0% transparent; width: 320px; height: 75px; float: left;" onmouseover="this.style.backgroundImage='url(images/stories/effect/ep11_hover.png)'" onmouseout="this.style.backgroundImage = 'url(images/stories/effect/ep11.png)'"></div>
</a>


Die Lösung von ComFreek ist allerdings die bessere, da sie auch bei Nutzern mit deaktiviertem Javascript funktioniert.
 
Wie sich übrigens ein "Rollover" (Grafiktausch) ohne Zuhilfenahme von JS mit CSS realisieren lässt, kannst du in meinem gleichnamigen Tutorial studieren, das in meiner Signatur genannt wird.

mfg Maik
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück