-1

在右侧，我有社交媒体图标。当您滚动到一个时，其他的应该会消失，而您悬停的那个应该会留下。这适用于 jsfiddle，但不适用于我的页面。

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

有什么想法吗？

http://jsfiddle.net/gvqGk/32/

该网站位于

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);

}

​</p> 

 /* 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>
4

3 回答 3

2

我不确定是什么导致了特定的悬停问题，但是有两个冲突<!DOCTYPE>的 s，一个<script>在<head>/<body>区域之外，一个条件注释完全破坏了 IE，因为文本标记了头部的末端并且开始身体的大部分头部仍然来...可能没有帮助。

相反，Fiddle 缺少上述所有的废话并且工作得很好。我建议在想知道为什么事情不起作用之前整理你的 HTML。

于 2012-07-15T20:36:45.067 回答
1

你在什么浏览器中测试这个？

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

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

简而言之，了解什么是 HTML 文档类型，并确保使用支持您尝试使用的大部分或全部内容的一种。希望您可以通过其中一个 doctype 选项找到一种快乐的媒介，但您可能不得不更改一些代码。祝你好运！

编辑：您必须在所有主要浏览器中测试您正在开发的任何内容。具体来说，原因是每个浏览器都有行为/解释差异。如果您在一个小时的编码过程中忘记在多个浏览器中进行测试，您通常会感到非常失望。大声笑，发现您的代码在 5 个浏览器中有 3 个被破坏并不有趣，而且当您在一小时前第一次编写它时，修复它会容易得多。这些是要编码的词：随手测试，广泛测试。

于 2012-07-15T21:18:52.083 回答
0

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

.social li a strong { top:-30px !important; left:-10px !important; }
于 2012-07-15T21:03:00.990 回答