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ぼかし半径で色の影を描くことを意味します。

影はオフセットもぼかしもなしで描画されるため、通常のテキストとまったく同じ場所に影が描画されます。

これを修正するには、ぼかし半径を追加します ( glow-yにします) 。

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

または影のオフセット ( glow-yが少ない):

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

ばかげているように聞こえるかもしれませんが、jquery が間違いなくサイトに正しく読み込まれていることを再確認しましたか?

確認する最善の方法は、私が通常使用するGoogleリンクを使用することです.

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

jquery呼び出しが行われる前に、ヘッダーにあることを確認してください。

于 2013-10-26T20:45:02.817 に答える