2013-10-26 5 views
3

Я пытаюсь сделать светящееся текстовое меню в 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(); 
}) 
+0

После повторного отступа кода я обнаружил, что ваше тело имеет свойство CSS, который не закрывается. Поместите запятую за '# 000' –

ответ

7

Я не уверен, что делает ваш Jquery. Но я вижу, что CSS ошибочен. Ваш .glow класс имеет:

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

Это означает: нарисовать тень цвета #CCC с (0px, 0px) смещения и 0px радиусом размытия.

Поскольку тень рисуется без смещения и без размытия, тень рисуется точно в том же месте обычного текста.

Чтобы это исправить, либо добавить радиус размытия (делает его тлеющего у)

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

или тень смещения (меньше тлеющего у):

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

Да, это должно сработать. См. [Здесь] (http://jsbin.com/UGoxifI/1/edit?html,css,output). –

+0

Вы правы, спасибо .... но я хочу выполнить наведение. – friendy

+1

Просто добавьте класс ': hover' на' .glow', как вы можете видеть [здесь] (http://jsbin.com/UGoxifI/4/edit) – Beterraba

0

Это может показаться глупым, но вы дважды проверили, чтобы убедиться, что jquery определенно загружается на ваш сайт правильно?

Лучший способ убедиться, что вы используете ссылку google, которую я обычно использую.

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

Удостоверьтесь, что он находится в заголовке ДО того, как будут выполнены любые вызовы jquery.

0

Я не понимаю, почему вы хотите использовать jquery для этого? По словам меня, вы можете сделать это только с помощью CSS, что является лучшим способом.

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

Смежные вопросы