Question

我无法弄清楚www.jquery.com如何在二级菜单上创建悬停阴影效果（下载，文档......）。我认为它是一个简单的jquery插件，但我无法在任何地方找到它。

我发现了这个：http://www.hintzmann.dk/testcenter/js/jquery/textshadow/，这是非常直接的，但（当然）是Internet Explorer的一个问题。当距离设置为1px时，IE显示2px ...这使得它在我的情况下无用

我对jquery.com脚本非常感兴趣..

（我已经看到IE中1px关闭的一个解决方案（http://stackoverflow.com/questions/2678037/css3-text-shadow-effect-with-jquery），但我对使用它不是很感兴趣提到的脚本:(

Answer 1

这只是CSS。重复该文本，一次为白色，一次为黑色。黑色位于下方并被.1em

偏移

<a href="http://docs.jquery.com">
   <span class="jq-shadow">Documentation</span>
   <span>Documentation</span>
</a>

CSS:
#jq-secondaryNavigation li a span.jq-shadow {
   top: .1em;
   left: 1em;
   color: #131C25;
   position: absolute;
   display: none;
}

Answer 2

他们正在使用$ .fn.textDropShadow，这是一个非常简单的函数，可以在悬停时添加一个新元素：

http://static.jquery.com/files/rocker/scripts/custom.js

Answer 3

他们的CSS定义如下：

#jq-secondaryNavigation li a span.jq-shadow, #jq-footerNavigation li a span.jq-shadow {
top: .1em;
left: 1em;
color: #131c25;
position: absolute;
display: none;
}

并在此处为文本提供悬停属性：

#jq-secondaryNavigation li a:hover span.jq-shadow

jquery.com的阴影效果

3 个答案: