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 +中工作，因此我无法真正使用文字阴影。＆lt;

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

所以你可以在这些链接上做一个正常的悬停（），现在你知道了这个秘密:(这将测试在a元素上的悬停，并且只发光span.title元素。 / p>

$('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]

我认为发现可能更适合您的目的而不是链接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”类足以使标题元素发光。

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

3 个答案: