CSS псевдо-классы с jQuery - PullRequest
Новая
       19

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

2 голосов
/ 28 января 2009

Я только что выучил немного 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 для псевдокласса никем не реализован, я сомневаюсь, смогу ли я вообще получить желаемый эффект ...

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

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

спасибо.

Ответы [ 5 ]

6 голосов
/ 12 мая 2011

Извлечено из Установка правил псевдокласса 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;
});

Надеюсь, это кому-нибудь поможет.

3 голосов
/ 28 января 2009

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

#foo a:hover { color: black !important; }
2 голосов
/ 10 ноября 2009

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

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

1 голос
/ 28 января 2009

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

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

[РЕДАКТИРОВАТЬ]: Вам может понадобиться добавить оператор IF, чтобы увидеть, существует ли класс в первую очередь.

0 голосов
/ 08 марта 2014

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

Я использую это для меню Nav, которое использует класс: 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);
}
...