0

此页面上的工具提示（facebook、twitter 等图标）在任何 Firefox 或 IE 中都能正确显示，但在 Chrome 中根本不显示。

CSS 看起来像这样：

<style>

.tooltip-fb {display: none; position: absolute; color: #fff; background: url('<?php bloginfo('template_directory'); ?>/img/bg.png'); padding: 5px; margin-left: -55px; margin-top: 40px;}

.tooltip-tw {display: none; position: absolute; color: #fff; background: url('<?php bloginfo('template_directory'); ?>/img/bg.png'); padding: 5px; margin-left: -5px; margin-top: 40px;}

.tooltip-tr {display: none; position: absolute; color: #fff; background: url('<?php bloginfo('template_directory'); ?>/img/bg.png'); padding: 5px; margin-left: 50px; margin-top: 40px;}

.tooltip-qr {display: none; position: absolute; color: #fff; background: url('<?php bloginfo('template_directory'); ?>/img/bg.png'); padding: 10px; margin-left: 49px; margin-top: 40px;} 

.tooltip-nw {display: none; position: absolute; color: #fff; background: url('<?php bloginfo('template_directory'); ?>/img/bg.png'); padding: 5px; margin-left: 166px; margin-top: 40px;}

a {position: relative;}

a:hover .tooltip-fb, a:hover .tooltip-tw, a:hover .tooltip-tr {display: block; text-align: center;}

a:hover .tooltip-nw {display: block; text-align: center;}

a:hover .tooltip-qr {display: block;}

</style>

标记是这样的：

<div style="margin-top: -170px; margin-left: 28px;">

<!-- FACEBOOK -->

<a href="https://www.facebook.com/pages/NH-Olomouc-Congress/102448499808962?ref=ts&fref=ts" target="_blank"><div class="ikony"><img src="<?php bloginfo('template_directory'); ?>/img/fb.jpg" onmouseover='$(".tooltip-fb").show();' onmouseout='$(".tooltip-fb").hide();' alt="facebook"></div><div class="tooltip-fb">Sledujte nás na Facebooku!</div></a>


<!-- TWITTER -->
<a href="https://twitter.com/nholomouc" target="_blank"><div class="ikony"><img src="<?php bloginfo('template_directory'); ?>/img/twit.jpg" alt="twitter" style=""></div><div class="tooltip-tw">Sledujte nás na Twitteru!</div></a>


<!-- TRIPADVISOR -->
<a href="http://www.tripadvisor.com/UserReviewEdit-g274718-d1783064-a_placetype.10023-e__2F__Hotel__5F__Review__2D__g274718__2D__d1783064__2D__Reviews__2D__NH__5F__Olomouc__5F__Congress__5F__Hotel__2D__Olomouc__5F__Olomouc__5F__Region__5F__Moravia__2E__html-NH_Olomouc_Congress_Hotel-Olomouc_Olomouc_Region_Moravia.html" target="_blank"><div class="ikony"><img src="<?php bloginfo('template_directory'); ?>/img/trip.jpg" alt="tripadvisor" style=""></div><div class="tooltip-tr">Ohodnoťte náš hotel!</div></a>


<!-- QR CODE -->
<a href="#"><div class="ikony"><img src="<?php bloginfo('template_directory'); ?>/img/qr.jpg" alt="qr code" style=""></div><div class="tooltip-qr"><center style="padding-bottom: 2px;">QR kód této stránky</center><img alt="QR kód této stránky" width="180" height="180" src="https://chart.googleapis.com/chart?cht=qr&amp;chs=250x250&amp;chl=<?php echo $pageURL;?>&amp;choe=UTF-8&amp;chld=L|1" /></div></a>


<!-- NEWSLETTER -->
<a href="http://www.algrafmedia.cz/wp/?page_id=2669" target="_blank"><div class="ikony"><img src="<?php bloginfo('template_directory'); ?>/img/news.jpg" alt="newsletter" style=""></div><div class="tooltip-nw">Odebírejte náš newsletter!</div></a>


</div>

只是一个纯 CSS 解决方案，用于在悬停时显示文本块。尝试了 JavaScript 解决方案（onmouseover、onmouseout），但在任何浏览器中均无效。

你会如何解决这个问题？

4

1 回答 1

1

我不知道它表现得像这样的确切原因，而是margin-top: -170px简单地height将 iframe 的 iframe 减少 170 （360 - 170 = 190）并margin从 div中删除

<iframe src="..." width="278" height="190" scrolling="no" frameborder="0" z-index="99"></iframe>
...
<div style="margin-left: 28px;">
于 2013-11-12T11:52:11.373 回答