jquery.com 的阴影效果答案

【问题标题】：jquery.com's shadow effectjquery.com 的阴影效果
【发布时间】：2011-03-28 19:42:10
【问题描述】：

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

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

我对 jquery.com 脚本很感兴趣..

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

【问题讨论】：

标签： jquery text shadow

【解决方案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;
}

【讨论】：

【解决方案2】：

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

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

【讨论】：

这个脚本有文档吗？我无法弄清楚它是如何工作的

【解决方案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

【讨论】：