Почему jQuery не работает как CSS с точки зрения наследования? - PullRequest
Новая
       1

Почему jQuery не работает как CSS с точки зрения наследования?

0 голосов
/ 29 октября 2010

Это должно быть так просто: 

$("a").hover(function () {
    $(this).stop().animate({color: "#00cc00"}, 'fast');
}, function () {
    $(this).stop().animate({color: "#939393"}, 'fast');
});

$(".footer_link").find("a").hover(function () {
    $(this).stop().animate({color: "#333"}, 'fast');
}, function () {
    $(this).stop().animate({color: "#939393"}, 'fast');
});

Я говорю своей странице, чтобы все теги при наведении меняли цвет.

Затем я даю другое правило для тегов вконкретный div.

Я знаю, если я сделаю это в CSS, это будет работать.Но в jQuery первое правило переопределяет все правила.

Было бы очень обременительно найти все элементы div и span, которые имеют теги, и указать их все просто для того, чтобы один тег мог сделать что-то другое.

Я что-то здесь не так делаю?

Вы можете увидеть это здесь: http://baked -beans.tv (нижний колонтитул - это то, где все работает не так, как должно.

Ответы [ 3 ]

3 голосов
/ 29 октября 2010

Я бы предложил это: 

$(".footer_link").find("a").unbind('mouseenter mouseleave').hover(yourhoverfunctions)

К этому времени вы сначала отвязываете курсор, связанный с 

.footer_link a
2 голосов
/ 29 октября 2010 
$(".footer_link").find("a").hover(function () {
    $(this).stop().animate({color: "#333"}, 'fast');
    $(this).stopPropagation();
}, function () {
    $(this).stop().animate({color: "#939393"}, 'fast');
    $(this).stopPropagation();
});

Это делает трюк?В jQuery вы добавляете события, а не свойства, поэтому у вас получается 2 события на 1 элемент, вышеупомянутое решение должно выполнить первое событие и $(this).stopPropagation();, остановив распространение события. Demo

Лучшее решение в этом случае - не регистрировать события на элементах дважды и отфильтровывать якоря .footer_link в вашем первом выражении, используя .not () или .filter () .

1 голос
/ 29 октября 2010

Это вроде работает как CSS в этом случае, так как вы используете .stop() и связываете позже со вторым (так как второе остановит первое).

Однако, по крайней мере, мне кажется , что ваш селектор выключен, class="footer_link" нигде не появляется, я думаю , что вы после этого получите: 

$("#footer").find("a").hover(function(){
  $(this).stop().animate({color: "#333"}, 'fast');
}, function(){
  $(this).stop().animate({color: "#939393"}, 'fast');
});

Обратите внимание, что это все еще не очень эффективно, поскольку вы связываете 2 обработчика для одной и той же вещи, поэтому лучше не связывать все <a> элементы с самого начала.

...