如何使用 jQuery 进行文本阴影缩放？答案

【问题标题】：How do i do a text-shadow zoom with jQuery?如何使用 jQuery 进行文本阴影缩放？
【发布时间】：2011-05-04 17:10:03
【问题描述】：

我想在此网站的页脚中重新创建效果：http://desandro.com/（将鼠标悬停在左下角的“Desandro made this”上。

这里他们使用 CSS3 和 text-shadow，但我想知道这是否可以使用 jQuery 来让它在所有浏览器中工作？

谢谢。

【问题讨论】：

这可能没有回答你的问题，但它确实是一个非常好的效果！（我建议你使用 CSS3 的方式，它更稳定，只有 IE9 不支持它，Opera、FF、Chrome 和 Safari 都可以......）

标签： jquery html css cross-browser

【解决方案1】：

对于跨浏览器的 cs3 阴影、渐变和圆角效果，您可以使用http://css3pie.com/ 实际上 CSS3 在所有最新的浏览器中都可以使用，除了 IE7 和 IE8，因此 css3 pie.com 是 IE 的解决方案。 ;)

【讨论】：

如果可以轻松完成，那就不要让它变得复杂，我的意思是添加jquery你将不得不修复跨浏览器的渲染问题，当页面在下载过程中它也会变慢。

【解决方案2】：

你可以这样做

解决方案：

你不需要 jquery。只需创建类，然后使用 Class_name:hover。它会工作。您提供的参考网站名称没有为此使用 jquery。

如果你想要 jquery 参考这个，例如：

HTML：

<a href="#">
    <span>David</span>
    <span>DeSandro</span>
    <span>DeSandro</span>
    <span>DeSandro</span>  
</a>

jquery:

 $(document).ready(
    $(a).hover(
       function(){
          $(this).children().eq(0).addclass('style1');
          $(this).children().eq(1).addclass('style2');
          $(this).children().eq(2).addclass('style3');
          $(this).children().eq(3).addclass('style4');
      },
      function(){ 
          $(this).children().eq(0).removeclass('style1');
          $(this).children().eq(1).removeclass('style2');
          $(this).children().eq(2).removeclass('style3');
          $(this).children().eq(3).removeclass('style4');
      });
 );

我不确定IE浏览器是否支持这个CSS

【讨论】：