Question

在右侧，我有社交媒体图标。当你滚动一个，其他人应该消失，你正在盘旋的那个应该留下来。这适用于jsfiddle，但不适用于我的页面。

此外，当您悬停时，图标的名称应显示在其上方。确实如此，但它非常紧张，但是在jsfiddle它可以正常工作......

有什么想法吗？

该网站位于

http://lolabellas.tumblr.com

非常感谢！

.social { list-style:none;margin:0; padding:0;}

.social li { display:inline; float:left;}
.social li a { display:block;width:32px; height:32px; position:relative; text-     decoration:none; padding-right:-5px}
.social li a strong { font-weight:normal; position:absolute; left:30px; top:-1px;   color:#fff; padding:3px; z-index:9999;
text-shadow:1px 1px 0 rgba(0, 0, 0, 0.75); background-color:rgba(0, 0, 0, 0.7);
-moz-border-radius:3px; -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); -webkit-border-radius:3px; -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); border-radius:3px; box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);

}

 /* SOCIAL ICONS - CSS3 */
 #css3:hover li { opacity:0.2; }

 #css3 li { -webkit-transition-property: opacity; -webkit-transition-duration: 500ms;
 -moz-transition-property: opacity; -moz-transition-duration: 500ms; }
  #css3 li a strong { opacity:0;
 -webkit-transition-property: opacity, top; -webkit-transition-duration: 300ms;
 -moz-transition-property: opacity, top; -moz-transition-duration: 300ms; }

 #css3 li:hover { opacity:1; }
 #css3 li:hover a strong { opacity:1; top:-30px; }


 li.facebook{background:url("http://static.tumblr.com/4aqmjkd/kVVm77wsy/facebook-32x32.png" ) no-repeat; width:32px; height:32px;}

 li.twitter {background:url("http://static.tumblr.com/4aqmjkd/yllm77x0x/twitter-32x32.png") no-repeat; width:32px; height:32px;}

 li.flickr {background:url("http://static.tumblr.com/4aqmjkd/ZzZm77wzi/flickr-32x32.png") no-repeat; width:32px; height:32px;}

 li.pintrest {background:url("http://static.tumblr.com/4aqmjkd/9RNm77x0c/pintrest__32_x_32.png") no-repeat; width:32px; height:32px;}

 li.etsy {background:url("http://static.tumblr.com/4aqmjkd/lWXm77wyk/etsy_32_x_32.png") no-repeat; width:32px; height:32px;}


 li.contact {background:url("http://static.tumblr.com/4aqmjkd/f5om77wxr/email_32_x_32.png") no-repeat; width:32px; height:32px;}


 <ul class="social" id="css3">
                        <li class="facebook"><a href="http://www.facebook.com/lolabellasco" target="_blank"><strong>Facebook</strong></a></li>
                        <li class="twitter"><a href="http://twitter.com/lolabellasco" target="_blank"><strong>Twitter</strong></a></li>


                        <li class="flickr"><a href="http://www.flickr.com" target="_blank"><strong>Flickr</strong></a></li>
                        <li class="pintrest"><a href="http://pinterest.com/lolabellas/" target="_blank"><strong>Pintrest</strong></a></li>
                        <li class="etsy"><a href="http://lolabellas.etsy.com" target="_blank"><strong>Etsy</strong></a></li>

                        <li class="contact"><a href="mailto:lolabellasetsy@gmail.com"><strong>Contact</strong></a></li>


                        </ul>

Answer 1

我不确定是什么导致了特定的悬停问题，但是在<!DOCTYPE>区域之外有两个有冲突的<script>，<head>/<body>，条件评论完全打破IE由于标记头部末端并开始身体的文字，大部分头部仍未来...可能没有帮助。

相反，小提琴缺乏以上所有的枷锁并且工作得很好。我建议整理你的HTML，然后才想知道为什么事情不起作用。

Answer 2

你在哪些浏览器中测试它？

另一个答案是<!DOCTYPE> HTML标记。您必须了解此标记的重要性。任何Web浏览器都会打开.HTML或.HTM文档，但浏览器实际知道作者的文件格式的唯一方法是包含此<!DOCTYPE>标记。刚开始，我没有意识到这一点。

那么谁在乎呢？嗯，重要的是浏览器是否将您的文件标识为HTML4，transitional XHTML，strict HTML5等等。例如，浏览器可能会自动识别缺少<!DOCTYPE>为HTML4的文档（因为该属性直到稍后才存在）。我相信这意味着浏览器会忽略CSS格式。

简而言之，了解HTML文档类型是什么，并确保使用支持您尝试使用的大部分或全部内容的文档。希望您能找到一个带有doctype选项的快乐媒体，但您可能必须改变一些代码。祝你好运！

编辑：您必须测试您在所有主流浏览器中开发的内容。具体而言，其原因是每个浏览器都存在行为/解释差异。如果您忘记在编码一小时内在多个浏览器中进行测试，您会非常失望。在5个浏览器中的3个浏览器中发现你的代码被破坏并不是很有趣，而且在你一小时前第一次编写它时它会更容易修复。这些是通过以下方式编写的单词：随时测试，并进行广泛测试。

Answer 3

@嗨，这应该有帮助。重新定义这种风格：

.social li a strong { top:-30px !important; left:-10px !important; }

不透明度不在网站上工作，但在jsfiddle工作....请帮助

3 个答案: