javascript - 我怎样才能让文本在另一个元素的鼠标悬停时发光(没有文本阴影)

Question

例如我有以下代码:

HTML:

<ul>
    <li>
        <a>
            <span class="title">Home</span>
            <span class="description">My House</span>
        </a>
    </li>
    <li>
        <a>
            <span class="title">About</span>
            <span class="description">Foo</span>
        </a>
    </li>
</ul>

我怎样才能只让标题类发光，就像悬停在 li 元素上时的外部发光效果。

我找到了这个插件: http://nakajima.github.com/jquery-glow/ ，但我不知道如何让它满足我的需要。编辑:这不是我真正想要的，因为它依赖于文本阴影。

我希望它能在 ie7+ 中工作，因此我不能真正使用文本阴影。<

Answer 1

您感兴趣的那部分代码(您发布的链接)是这样的:

$(this).animate({
        color: TO_GLOW_TEXT_COLOR,
        textShadow: {
          begin: true,
          color: TO_GLOW_HALO_COLOR,
          radius: GLOW_RADIUS
        }
      }, DURATION);

这使文本发光。 (更改大写位)。这使它再次褪色:

$(this).animate({
        color: ORIGINAL_COLOR,
        textShadow: {
          begin: false,
          color: TO_GLOW_HALO_COLOR,
          radius: GLOW_RADIUS
        }
      }, DURATION);

所以你现在可以在这些链接上做一个普通的 hover() 现在你知道了 secret :(这将测试悬停在 a 元素上并且只发光 span.title 元素)。

$('ul li a').hover(function(){
    $(this).find('span.title').animate({.....}); // fade in
},
function(){
    $(this).find('span.title').animate({.....}); // fade out
});

问题 - 它所做的一切都是使用 jquery 而不是 CSS 设置 textShadow，因此如果 textShadow 不起作用，这在 IE7 中将不起作用。

PS:您发布的链接在 firefox 中也不起作用 - 除非我的 firefox 坏了。