Как сделать так, чтобы текст светился при наведении курсора на другой элемент (без тени текста) - PullRequest
Новая
       13

Как сделать так, чтобы текст светился при наведении курсора на другой элемент (без тени текста)

1 голос
/ 16 июня 2011

Скажите, например, у меня есть следующий код:

HTML: 

<ul>
    <li>
        <a>
            <span class="title">Home</span>
            <span class="description">My House</span>
        </a>
    </li>
    <li>
        <a>
            <span class="title">About</span>
            <span class="description">Foo</span>
        </a>
    </li>
</ul>

Как я могу сделать ТОЛЬКО заголовок класса свечения, как во внешнем эффекте свечения, когда элемент li наведен поверх.

Я нашел этот плагин: http://nakajima.github.com/jquery-glow/,, но я не могу понять, как заставить его работать в соответствии с моими потребностями. РЕДАКТИРОВАТЬ: Это не совсем то, что я ищу, поскольку он опирается на тень текста.

Я хотел, чтобы это работало в ie7 +, поэтому я не могу использовать тень текста. <</p>

Ответы [ 3 ]

2 голосов
/ 16 июня 2011

Интересующий вас код (ссылка, которую вы разместили) выглядит следующим образом: 

$(this).animate({
        color: TO_GLOW_TEXT_COLOR,
        textShadow: {
          begin: true,
          color: TO_GLOW_HALO_COLOR,
          radius: GLOW_RADIUS
        }
      }, DURATION);

Это делает текст светящимся.(изменить заглавные биты).И это заставляет его снова исчезать: 

$(this).animate({
        color: ORIGINAL_COLOR,
        textShadow: {
          begin: false,
          color: TO_GLOW_HALO_COLOR,
          radius: GLOW_RADIUS
        }
      }, DURATION);

Таким образом, вы можете просто сделать обычное наведение () для этих ссылок, теперь вы знаете секрет: (это будет проверять наведение на элемент a и ТОЛЬКОсвечение элемента span.title). 

$('ul li a').hover(function(){
    $(this).find('span.title').animate({.....}); // fade in
},
function(){
    $(this).find('span.title').animate({.....}); // fade out
});

Проблема - все, что он делает - это устанавливает textShadow с использованием jquery вместо CSS, поэтому в IE7 это не будет работать, если textShadowне работает.

PS: ссылка, которую вы разместили, не работает и в Firefox - если мой Firefox не сломан.

0 голосов
/ 16 июня 2011

Вы спрашиваете "Как мне заставить вещи светиться?"или вы спрашиваете: «Как мне нацелить свечение на элемент, который я хочу?»

Если вы хотите последнее, я бы сделал это следующим образом: 

$(document).ready(function(){
        $('li').hover(
            function(){
                $(this).find('.title').addClass('glow');
            },function(){
                $(this).find('.title').removeClass('glow');
            }
        );
});

Предполагая, что добавлениеКласс «свечение» достаточен для того, чтобы загорелся элемент заголовка.

0 голосов
/ 16 июня 2011 
$("li").hover(function()
{
    //mouse over
    var s = $(this).children("a").children("span");

    for(element in s)
    {
        if(element.hasClass("title"))
        {
            //add glow to element
        }
    }
},
function()
{
    //remove glow here in a similar way
});

Также обратите внимание, что если ваша разметка непротиворечива, то вы можете просто выбрать первый элемент вместо того, чтобы проходить через них все, так что вы просто добавили бы свечение к s [0]

Я думаю, что возможно найтиеще больше подходит для ваших целей, а не для цепочки вызовов children ().http://api.jquery.com/find/

...