CSS псевдоклассы с jQuery

Я только что выучил немного jQuery и пытаюсь использовать его для простого эффекта изменения цвета. Допустим, у меня есть два <div>s, #foo и #bar. #foo имеет много URL-адресов и имеет следующий CSS-код: 

#foo a {color: blue; border-bottom: 1px dashed blue}
#foo a:hover {color: black; border-bottom: 1px solid black}

Теперь я хотел бы изменить цвет ссылок (A: link) в #foo, когда пользователь нажимает #bar, но сохранить цвет a: hover нетронутым, поэтому я пишу свою функцию следующим образом: 

//...
$("#bar").click(function () {
  $("#foo a").css("color", "red");
});
//...

Проблема в том, что, хотя эта функция действительно меняет все ссылки на красный, цвет a: hover когда пользователь перемещает курсор на ссылки, они остаются красными, а не становятся черными, как я ожидал.

Поскольку я вижу, что jQuery помещает встроенный стиль в <a>s в #foo, превращает их в <a style="color:red;" href="...">, я предполагаю, что это перезапишет псевдокласс: hover. Поскольку встроенный стиль attr для псевдокласса не был реализован никем afaik, я сомневаюсь, что смогу получить желаемый эффект вообще...

И все же, есть ли какие-то решения, которые не требуют от меня написать что-то как 

$("#foo a").hover(
    function(){ $(this).css("color", "black");},
    function(){ $(this).css("color", "blue");}
)

?

Спасибо.

5 2
css jquery pseudo-class

5 ответов:

!важно, кажется, сделать CSS свойство сильнее, чем встроенный стиль, по крайней мере, в Firefox. Попробуйте изменить свой стиль на что-то вроде этого: 

#foo a:hover { color: black !important; }
3

Извлечено из Установка правил псевдокласса CSS из Javascript

На самом деле вы можете изменить значение класса при наведении или с помощью :after или любого другого псевдокласса, который вы хотите с помощью javascript: 

$(document).ready(function()
{
    var left = (($('.selected').width() - 7) / 2) + 'px';
    document.styleSheets[1].insertRule('.selected:after { left: ' + left + '; }', 0);
    document.styleSheets[0].cssRules[0].style.left = left;
});
Я надеюсь, что это кому-нибудь поможет.
6

AFAIK, jQuery не может устанавливать псевдоклассы. Однако есть и другой способ:

Http://www.4pmp.com/2009/11/dynamic-css-pseudo-class-styles-with-jquery/

2

Может быть, вы могли бы удалить класс, добавленный при наведении курсора мыши на ссылки, например: 

$('#bar').click(function() {
  $('#foo a').css('color', 'red');
});
$('#foo').hover() {
  $'#foo a').removeCss('color', 'red');
});

[EDIT]: возможно, Вам потребуется добавить оператор IF, чтобы увидеть, существует ли класс В первую очередь.

1

Еще один неприятный способ сделать это с помощью Javascript-это очистить элемент контейнера и снова заполнить его содержимым и снова настроить событие click. Это разрушает все состояния и события, так что они должны быть настроены снова, но для простых вещей, которые не содержат массы данных, это работает!

Я использую это для меню навигации, которые используют класс: hover.

$('#page_nav ul').click(clearNavMenu_Hover);

function clearNavMenu_Hover() {
    var tmpStore=$('#page_nav').html();
    $('#page_nav').empty();
    $('#page_nav').html(tmpStore);
    $('#page_nav ul').click(clearNavMenu_Hover);
}
0