懸停的發光文字

我想在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(); 
})

來源

2013-10-26 friendy

後重新縮進您的代碼，我發現，你的身體有沒有關閉CSS屬性。在'＃000'背後放一個分號。 –

我不知道你的jQuery是做什麼。但我可以看到CSS是錯誤的。您.glow類有：

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

這意味着：畫色彩#CCC的陰影與（0px，0px）偏移和0px模糊半徑。

由於陰影繪製時沒有偏移和沒有模糊，所以陰影正好繪製在正常文本的相同位置。

爲了解決這個問題，無論是添加一個模糊半徑（使得它輝光-Y）

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

或陰影偏移（以下輝光-Y）：

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

來源

2013-10-26 20:39:50

是的，這應該起作用。見[這裏]（http://jsbin.com/UGoxifI/1/edit?html,css,output）。 –

你是對的謝謝你....但我想執行懸停。 – friendy

只需在'.glow'類中添加'：hover'，就可以看到[here]（http://jsbin.com/UGoxifI/4/edit） – Beterraba

這可能聽起來很愚蠢，但你有沒有檢查過，以確保jQuery正確地加載到您的網站正確？

確定的最佳方法是使用我通常使用的谷歌鏈接。

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

請確保它在標頭之前的任何jquery調用。

來源

2013-10-26 20:45:02

我不明白你爲什麼要使用jQuery這個？根據我的說法，你可以用CSS來做到這一點，這是更好的方法。

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

來源

2013-10-26 21:19:40 Robin

懸停的發光文字

回答

相關問題