jquery.com 的阴影效果

Question

我不明白 www.jquery.com 如何在二级菜单上制作悬停阴影效果（下载、文档...”。我以为这是一个简单的 jquery 插件，但我在任何地方都找不到它。

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

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

我在 IE 中看到了 1px off 的一种解决方案（http://stackoverflow.com/questions/2678037/css3-text-shadow-effect-with-jquery），但我对使用提到的脚本不太感兴趣:(

Answer 1

这只是CSS。文本重复一次，一次为白色，一次为黑色。黑色位于下方并偏移 0.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