[gelöst]hover span fixe Position

morpheus_vs · 10. Februar 2015

Hallo zusammen

Wir erstellen für einen Kunden eine responsive Webseite. Unter der Rubrik Produkte gibt es ein Aufzählung. Die Details sollten mittels hover->span angezeigt werden. Mein Problem nun ist, das die Postion der Produkte-Details immer am gleichen Ort aufgehen sollte (siehe Grafik).
Hier mein Ansatz. Leider geht der Tooltip immer auf der Höhe des jeweiligen Produktes auf.

CSS

#content a.tooltip{position:relative;text-decoration:none;}#content a.tooltip span{display:none;}#content a.tooltip:hover span{position:absolute;top:0;margin-top:250px;display:block;width:525px;	height:646px;background:#FFF;padding:10px;}

HTML

<a class="tooltip" href="#" target="_blank">
   <img src="../images/tauchpumpen/abwassertauchpumpe_best_one.jpg">
   <h4>Edelstahl-Tauchpumpe</h4>
   <h3>Best one / Vox</h3>        
   <span style="position:absolute; top:0; margin-top:50px;">
       <img src="../images/tauchpumpen/abwassertauchpumpe_best_one.jpg">
   </span>
</a>

Hoffentlich könnt ihr dabei helfen.

wolf · 11. Februar 2015

Hier mal bisschen spielerei: http://codepen.io/wolf-w/pen/XJVEwZ
Der Trick ist dem Wrap ein 'pos: relative' zu geben und dem div ein 'pos: absolute' ..

morpheus_vs · 13. Februar 2015

Danke hat geholfen.

Jetzt hätte ich noch eine weitere Frage. Bei der Desktop-Version ist das ja kein Problem aber wenn ich zum Beispiel den Tool-Tipp unter einem Smartphone anklicke, wird das PDF direkt heruntergeladen. Kann ich das irgendwie so lösen, dass das PDF erst dann herunter geladen wird, wenn ich innerhalb des Tool-Tipps den Button anklicke. Hoffe habe ich einigermassen verständlich ausgedrückt.

Code

<a href="../pdf/de/1_tauchpumpen/1.010 Best One d 01.15.pdf" target="_blank"> 
     <img src="../images/tauchpumpen/abwassertauchpumpe_best_one.png">
     <h4>Edelstahl-Tauchpumpen</h4>
     <h3>Best One / Best One Vox</h3>
     <div class="hover_bridge"></div>
     <span>
          <div class="titel_details">
               <h4>Edelstahl-Tauchpumpen</h4>
               <h3>Best One / Best One Vox</h3>
          </div>
          <div class="background_produkte"><img src="../images/tauchpumpen/abwassertauchpumpe_best_one.png"></div>
          <div class="produkte_details">
               <ul>
                    <li>Pumpen komplett in Edelstahl</li>
                    <li>In verschiedenen Ausführungen und Spezialausführungen erhältlich</li>
                    <li>Bis max. 9 m / max. 10,2 m<sup>3</sup>/h</li>
                    <li>Feststoffe bis 20mm Ø</li>
               </ul><!--END ul-->
               <div class="pdf_datenblatt"><img src="../images/pdf_logo.png"><p>Datenblatt</p></div>
          </div><!--END produkte_details-->
     </span>
</a>

Alles anzeigen

Die andere Frage hat sich inzwischen auch erledigt.

wolf · 13. Februar 2015

Einfach das 'a' um den tooltip weg machen?

Harybald · 12. März 2015

das die Postion der Produkte-Details immer am gleichen Ort aufgehen sollte (siehe Grafik).

NAT

[gelöst]hover span fixe Position

Jetzt mitmachen!

Teilen