✔ hover image

[brainsucker]

Hallo zusammen,

ich habe folgendes Problem und hoffe bei Euch Hilfe zu finden:

Ich habe eine Seite auf der am linken rand mehrere VorschauBilder untereinander aufgelistet sind. Wenn man mit der Maus über ein Bild fährt soll eine vergrößerte Vorschau dieses Bildes in der Mitte der Seite angezeigt werden.

Ich habe es auch soweit hinbekommen, dass das mit dem Firefox und Opera wunderbar funktioniert. Nur der IE macht da absolut gar nichts. Hier mal mein Code:


HTML

<div class="bilder">
        <a href=""><img src="bild1.jpg"/><span>Bildbeschreibung<img src="bild1.jpg"/></span> </a>
<a href=""><img src="bild2.jpg"/><span>Bildbeschreibung<img src="bild2.jpg"/></span> </a>
<a href=""><img src="bild3.jpg"/><span>Bildbeschreibung<img src="bild3.jpg"/></span> </a>
</div>

CSS

     .bilder{
        padding:7px 0px 3px 7px;
        width:100px;
        margin-right: 30px;
        float:left;
     }

   
    .bilder a img {
       width:100px;
       padding:2px;
       margin:1px 1px 2px 1px;
       border:0px solid #FFFFFF;
       float:left;
   } 

    
    div.bilder a span {
      color: #858445;
      border:1px solid #cfcfcf;
      display: none;
    }
    

   div.bilder a:hover span {
       display: block;
       position: fixed;
       margin: 0px 0 0 175px;
   }

  
  div.bilder a span img {
       width: 400px;
  }

Wäre super wenn jemand eine Lösung des Problems finden würde...

 

[Maik]

Hi,

erweitere das Stylesheet mit der folgenden Regel:

div.bilder a:hover { border:none; }

 

[brainsucker]

hi, hat leider kein Effekt :-(

 

[Maik]

Bei mir funktioniert es jetzt im IE6 einwandfrei, und der IE7 hat das "CSS-Popup" auch ohne diese Regelerweiterung geöffnet.



Es sei an dieser Stelle noch darauf hingewiesen, dass der IE6 den Positionswert fixed nicht unterstützt.

 

[brainsucker]

So siehts bei mir nun aus:

     .bilder{
        padding:7px 0px 3px 7px;
        width:100px;
        margin-right: 30px;
        float:left;
     }

   
    .bilder a img {
       width:100px;
       padding:2px;
       margin:1px 1px 2px 1px;
       border:0px solid #FFFFFF;
       float:left;
   } 

div.bilder a:hover { border:none; }
    
    div.bilder a span {
      color: #858445;
      border:1px solid #cfcfcf;
      display: none;
    }
    

   div.bilder a:hover span {
       display: block;
       position: fixed;
       margin: 0px 0 0 175px;
   }

  
  div.bilder a span img {
       width: 400px;
  }

 

[Maik]

Wie gesagt und im Anhang dokumentiert, bei mir gibt's da im IE keine Probleme mit dem Stylesheet.

Möglicherweise musst du den Browser-Cache leeren.