“active”类应该使导航项发光。
http://kevinmikol.com/dmi/home
(function($) {
var currentRadius, multiplier;
function parseOptions(options) {
return {
RADIUS: (options.radius || 20),
DURATION: (options.duration || 500),
TEXT_COLOR: (options.textColor || '#fff'),
HALO_COLOR: (options.haloColor || '#777')
}
}
function currentRadius(elem) {
if (prop = elem.style['text-shadow']) {
return parseInt(prop.match(/0 0 (\d+)px/));
} else {
return 0;
}
}
function stepTextShadow(fx) {
if (fx.state == 0) {
fx.start = currentRadius(fx.elem);
}
updatedRadius = fx.end.begin ?
parseInt(fx.end.radius * fx.pos) :
parseInt(fx.end.radius - (fx.end.radius * fx.pos))
if (fx.end.begin || (fx.state < 1)) {
$(fx.elem).css('text-shadow', fx.end.color + ' 0 0 ' + updatedRadius + 'px');
} else {
$(fx.elem).css('text-shadow', $(fx.elem).data('glow.originalGlow'));
}
}
function addGlow(opts) {
var opts = parseOptions(opts || { });
function startGlow() {
$(this).stop().animate({
color: opts.TEXT_COLOR,
textShadow: {
begin: true,
color: opts.HALO_COLOR,
radius: opts.RADIUS
}
}, opts.DURATION);
}
function startFade() {
$(this).stop().animate({
color: $(this).data('glow.originColor'),
textShadow: {
begin: false,
color: opts.HALO_COLOR,
radius: opts.RADIUS
}
}, opts.DURATION);
}
with($(this)) {
bind('mouseenter', startGlow);
bind('mouseleave', startFade);
data('glow.originColor', css('color'));
data('glow.originalGlow', (css('text-shadow') || 'none'));
}
return this;
}
$.fx.step['textShadow'] = stepTextShadow;
$.fn.addGlow = addGlow;
})(jQuery);
最佳答案
据我了解。当将鼠标悬停在单击的页面上时,发光消失,这是因为当将鼠标悬停在 li
类 active
中的 a
标记时,正在获取属性 不显示
。因此,如果您添加一个脚本,以便每次悬停导航选项卡时,您都可以检查 li 的类是否处于事件状态
如果 li
的类处于事件状态,您可以使用
$('.active').find('a').attr('style','');
当然,您已经使用 css 为 active
类指定了样式。但内联样式总是会覆盖 css 样式。
希望这有帮助。
关于jquery - jquery运行后CSS属性不会保留,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12549265/