4

我正在尝试在 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();
})
4

3 回答 3

7

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

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

#CCC这意味着：使用 ( 0px, 0px) 偏移和0px模糊半径绘制颜色阴影。

由于阴影是在没有偏移和模糊的情况下绘制的，所以阴影是在普通文本的同一位置绘制的。

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

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

或阴影偏移（较少的 gloom-y）：

text-shadow: #CCC 2px 4px 0px;
于 2013-10-26T20:39:50.440 回答
0

这可能听起来很傻，但是您是否仔细检查过以确保 jquery 确实正确地加载到您的站点中？

确保最好的方法是使用我通常使用的谷歌链接。

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

在进行任何 jquery 调用之前，请确保它位于标题上。

于 2013-10-26T20:45:02.817 回答
0

我不明白你为什么要为此使用jquery？根据我的说法，您只能使用 CSS 来做到这一点，这是一种更好的方法。

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

于 2013-10-26T21:19:40.357 回答