jquery - 悬停时发光的文字

Question

我正在尝试在 jQuery 中制作一个发光的文本菜单，经过大量的努力后它仍然无法正常工作。我不知道我的错误在哪里...有人可以帮助我吗？

HTML:

<div id="list">
    <div class="glow Text">HOME</div>
    <div class="glow Text">CONTACT</div>
    <div class="glow Text">PRODUCTS</div>
    <div class="glow Text">SERVICES</div>
    <div class="glow Text">BLOG</div>
</div>

CSS:

body{
    background:#000
}
#list .glow{
    text-shadow: #CCC 0px 0px 0px;
    position:relative;
    color: #CCC;
    font-size: 28px;
    margin: 0px;
    padding: 0px;
    line-height: 26px;
    font-family: Arial Narrow;
}
#list .active{
    position:relative;
    color: #FFF;
    font-size: 28px;
    margin: 0px;
    padding: 0px;
    line-height: 26px;
    font-family: Arial Narrow;
}

jQuery:

jQuery(document).ready(function() {
    jQuery('.glow').glow();
})

Answer 1

我不确定你的 jQuery 在做什么。但我可以看到 CSS 是错误的。你的 .glow 类有:

text-shadow: #CCC 0px 0px 0px;

这意味着:绘制颜色 #CCC 的阴影，偏移量为 (0px, 0px) 和 0px模糊半径。

由于阴影是在没有偏移并且没有模糊的情况下绘制的，因此阴影被绘制在与普通文本完全相同的位置。

要解决此问题，请添加模糊半径(使其发光)

text-shadow: #CCC 0px 0px 4px;

或阴影偏移(较少glow-y):

text-shadow: #CCC 2px 4px 0px;