如何在鼠标悬停另一个元素时使文本发光（没有文本阴影）

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() ，现在你知道了秘密：（这将测试在 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 坏了。

Answer 2

$("li").hover(function()
{
    //mouse over
    var s = $(this).children("a").children("span");

    for(element in s)
    {
        if(element.hasClass("title"))
        {
            //add glow to element
        }
    }
},
function()
{
    //remove glow here in a similar way
});

还要注意，如果你的标记是一致的，那么你可以只选择第一个元素而不是循环遍历它们，所以你只需将发光添加到 s[0]

我认为 find 可能更适合您的目的，而不是链接 children() 调用。 http://api.jquery.com/find/

Answer 3

您是在问“我如何让事物发光？”还是您在问“我如何将光晕定位到我想要的元素？”

如果你想要后者，我会这样做：

$(document).ready(function(){
        $('li').hover(
            function(){
                $(this).find('.title').addClass('glow');
            },function(){
                $(this).find('.title').removeClass('glow');
            }
        );
});

假设添加“glow”类足以使标题元素发光。