例如我有以下代码:
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+ 中工作,因此我不能真正使用文本阴影。<
最佳答案
您感兴趣的那部分代码(您发布的链接)是这样的:
$(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 坏了。
关于javascript - 我怎样才能让文本在另一个元素的鼠标悬停时发光(没有文本阴影),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6372038/