jQuery css стили, не обновляемые при определенных условиях

Question

Я провел несколько расширенных поисков и не нашел подходящих ответов для этой конкретной проблемы.

У меня есть <div> и <a>, которые влияют на стили друг друга при наведении (изменения цвета ссылки и изменения фона div). На странице есть несколько наборов.

У меня настоящие проблемы с изменением стилей css. Если я быстро перемещаю мышку с <a> на <div>, а затем перетаскиваю мышь из <div>, цвет активного состояния ссылки остается прежним, хотя мой компонент mouseleave как <a>, так и <div> hover() имеют инструкции для установите цвета ссылок на их значения по умолчанию. Что более странно, так это то, что мышиные мыши, конечно, запускают (можно получить предупреждение() s для показа), но команды .css («цвет», любые) просто не выполняются. Как только цвет «застрял» таким образом, независимо от того, где я перемещаю мышь (за исключением самой застрявшей ссылки), цвет не изменится, хотя все остальное запускает то, что должно быть избыточным событием, которое выдает команды .css эта ссылка для возврата в неактивное состояние.

Это какой-то освежающий сбой?

Код на самом деле не нужен, но в основном мы говорим о нижеследующем, с другим блоком кода. Divover в качестве селектора. Этот код был более изящным и менее явным, но я просто пытался все исправить эту ошибку, вплоть до использования операторов if и явно указывая каждое изменение стиля, включая несколько избыточных команд на каждом событии, чтобы отключить все, что застряло (ни один из них не работает).

$("a[rel]").hover(function(){ 
    var therel=$(this).attr('rel'); 
    if (therel == 'about') { 
    $(this).css({'color':'#fb0607'}); 
    $("a[rel='team']").css({'color':'#999'}); 
    $("a[rel='projects']").css({'color':'#000'}); 
    $("a[rel='links']").css({'color':'#666'}); 
    $("a[rel='contact']").css({'color':'#000'}); 
    $("div[rel="+therel+"]").css('background','transparent url(assets/img/box1_hover.jpg)'); 
    } 
    else if (therel == 'projects') { 
    $(this).css({'color':'#03acef'}); 
    $("a[rel='about']").css({'color':'#777'}); 
    $("a[rel='team']").css({'color':'#999'}); 
    $("a[rel='links']").css({'color':'#666'}); 
    $("a[rel='contact']").css({'color':'#000'}); 
    $("div[rel="+therel+"]").css('background','transparent url(assets/img/box2_hover.jpg)'); 
    } 
    else if (therel == 'team') { 
    $(this).css({'color':'#e53cdd'}); 
    $("a[rel='about']").css({'color':'#777'}); 
    $("a[rel='projects']").css({'color':'#000'}); 
    $("a[rel='links']").css({'color':'#666'}); 
    $("a[rel='contact']").css({'color':'#000'}); 
    $("div[rel="+therel+"]").css('background','transparent url(assets/img/box3_hover.jpg)'); 
    } 
    else if (therel == 'links') { 
    $(this).css({'color':'#60a43b'}); 
    $("a[rel='about']").css({'color':'#777'}); 
    $("a[rel='projects']").css({'color':'#000'}); 
    $("a[rel='team']").css({'color':'#999'}); 
    $("a[rel='contact']").css({'color':'#000'}); 
    $("div[rel="+therel+"]").css('background','transparent url(assets/img/box4_hover.jpg)'); 
    } 
    else if (therel == 'contact') { 
    $(this).css({'color':'#e7470a'}); 
    $("a[rel='about']").css({'color':'#777'}); 
    $("a[rel='projects']").css({'color':'#000'}); 
    $("a[rel='team']").css({'color':'#999'}); 
    $("a[rel='links']").css({'color':'#666'}); 
    $("div[rel="+therel+"]").css('background','transparent url(assets/img/box5_hover.jpg)'); 
    } 
    },function(){ 
    var therel=$(this).attr('rel'); 
    if (therel == 'about') { 
    $(this).css({'color':'#777'}); 
    $("a[rel='projects']").css({'color':'#000'}); 
    $("a[rel='team']").css({'color':'#999'}); 
    $("a[rel='links']").css({'color':'#666'}); 
    $("a[rel='contact']").css({'color':'#000'}); 
    $("div[rel="+therel+"]").css('background','transparent url(assets/img/box1.jpg)'); 
    } 
    else if (therel == 'projects') { 
    $(this).css({'color':'#000'}); 
    $("a[rel='about']").css({'color':'#777'}); 
    $("a[rel='team']").css({'color':'#999'}); 
    $("a[rel='links']").css({'color':'#666'}); 
    $("a[rel='contact']").css({'color':'#000'}); 
    $("div[rel="+therel+"]").css('background','transparent url(assets/img/box2.jpg)'); 
    } 
    else if (therel == 'team') { 
    $(this).css({'color':'#999'}); 
    $("a[rel='about']").css({'color':'#777'}); 
    $("a[rel='projects']").css({'color':'#000'}); 
    $("a[rel='links']").css({'color':'#666'}); 
    $("a[rel='contact']").css({'color':'#000'}); 
    $("div[rel="+therel+"]").css('background','transparent url(assets/img/box3.jpg)'); 
    } 
    else if (therel == 'links') { 
    $(this).css({'color':'#666'}); 
    $("a[rel='about']").css({'color':'#777'}); 
    $("a[rel='projects']").css({'color':'#000'}); 
    $("a[rel='team']").css({'color':'#999'}); 
    $("a[rel='contact']").css({'color':'#000'}); 
    $("div[rel="+therel+"]").css('background','transparent url(assets/img/box4.jpg)'); 
    } 
    else if (therel == 'contact') { 
    $(this).css({'color':'#000'}); 
    $("a[rel='about']").css({'color':'#777'}); 
    $("a[rel='projects']").css({'color':'#000'}); 
    $("a[rel='team']").css({'color':'#999'}); 
    $("a[rel='links']").css({'color':'#666'}); 
    $("div[rel="+therel+"]").css('background','transparent url(assets/img/box5.jpg)'); 
    } 
    }); 

Любая помощь очень ценится!

В качестве дальнейшего контроля, даже проблемы с получением функций .hover() на разделителях изображений, чтобы изменить цвета ссылок. В общем, кажется, что единственный способ заставить цвета ссылок работать так, как они есть, - это фактически зависать над самой ссылкой - в любое время, когда я выдаю .css-ссылку на ссылку из другого места, свойство не обновляет ,

Answer 1

Почему бы вам не сделать это со стилем? , например.

a[rel=about] { color:#777; } 
a[rel=about]:hover { color:#fb0607; } 

CSS: наведите псевдо-селектор не имеет почти столько же причуды, как onmouseout и OnMouseOver, и она не зависит от наличия у пользователя JavaScript включен

EDIT в ответ на OP комментарий

$("a[rel]").hover(function(){ 
    var therel=$(this).attr('rel'); 
    $("div[rel]").removeClass("rel_active"); 
    $("div[rel="+therel+"]").addClass("rel_active";) 
}); 

и сделать свой CSS, как:

div[rel=links].rel_active { 
    background: transparent url(assets/img/box3.jpg); 
} 

он все еще может быть оптимизирован больше, но он определенно будет быстрее, чем раньше. Вы по-прежнему сможете обмануть его, быстро двигая мышью или уходя, выходя из окна браузера и т. Д.Альтернативы запутаться (например, с помощью события MouseMove)

EDIT 3

При удалении класса, это, вероятно, более эффективно делать:

$("div.rel_active").removeClass("rel_active");