Javascript 如何使文本在另一个元素的鼠标上方发光（没有文本阴影）

例如，假设我有以下代码：

HTML:

家
我家


关于
福

如何仅使标题类发光，如将li元素悬停在上方时的外部发光效果

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

我希望它在ie7+中工作，因此我不能真正使用文本阴影。 还要注意的是，如果标记是一致的，那么您可以选择第一个元素，而不是循环遍历所有元素，这样您就可以简单地将光晕添加到s[0]

我认为find可能更适合您的目的，而不是链接children（）调用

您感兴趣的代码（您发布的链接）是：

$(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);

因此，您可以在这些链接上执行正常的悬停（），现在您知道了其中的秘密：（这将测试

a

元素上的悬停，并且只会发光

span.title

元素）

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

PS：你发布的链接在firefox中也不起作用-除非我的firefox被破坏。

你是在问“我如何使事物发光？”还是在问“我如何将发光对准我想要的元素？”

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

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

---

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

我看不出css是如何相关的？您能解释一下为什么您不能弄清楚如何使jquery发光插件工作吗？这里的自述文件对我来说很简单。不用担心css jai，我也不知道你为什么需要它。我可以让它工作，但我不能让它在我想要的时候发光，它只在文本本身悬停时发光。考虑到Thomas所说的，我认为这个插件可能是一条死胡同。有人知道没有文字阴影可以在ie7中工作的东西吗？哈，我可以看出我的问题的措辞没有那么好，我更想问的是，如果可能的话，如何在没有文字阴影的情况下使文字发光，以便在ie（7+）中实现发光。不知道。链接设置了颜色变化的动画，但是没有文字阴影，没有光晕。

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

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

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