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的阴影。

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

要解决此问题，请添加模糊半径（使其 glow-y ）

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

或阴影偏移（少 glow-y ）：

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

Answer 2

这可能听起来很傻，但你仔细检查过以确保jquery肯定会正确加载到你的网站吗？

确保使用我通常使用的Google链接的最佳方式。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

确保在进行任何jquery调用之前它都在标题上。

Answer 3

我不明白你为什么要使用jquery呢？根据我的说法，你只能使用CSS，这是一个更好的方法。

https://duckduckgo.com/?q=css+glow

悬停的发光文本

3 个答案: