1

比如说我有以下代码：

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+ 中工作，因此我不能真正使用文本阴影。<

4

3 回答 3

2

您感兴趣的那段代码（您发布的链接）是这样的：

$(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 坏了。

于 2011-06-16T12:57:52.897 回答
0 
$("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/

于 2011-06-16T12:56:38.440 回答
0

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

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

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

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

于 2011-06-16T13:00:18.020 回答