jQuery addClass и removeClass issue

Question

Im показывает и позиционирует <span> на основе события опрокидывания. Прокрутка также вызывает изменение непрозрачности. Все работает хорошо, за исключением того, что класс непрозрачности удаляется, когда скрытый элемент виден, и вы просматриваете этот элемент.

Итак, в приведенной ниже скрипте, если вы опрокинули элемент «Hello», непрозрачность фонового изображения будет удалена.

Я не могу изменить разметку, поэтому jQuery нужно будет выполнять весь подъем.

Спасибо!

http://jsfiddle.net/W3wEd/

$('.campaign-1').on('mouseenter', function(){ 
    $(this).addClass('campaign-hover'); 
    updateHover(); 
}); 
$('.campaign-1').on('mouseleave', function(){ 
    $('.campaign-hover').removeClass('campaign-hover'); 
    updateHover(); 
}); 
$('.cta').on('mouseenter', function(){ 
    $(this).addClass('cta-hover'); 
    updateHover(); 
}); 
$('.cta').on('mouseleave', function(){ 
    $(this).removeClass('cta-hover'); 
    updateHover(); 
}); 

function updateHover() { 
if ($('.campaign-1').hasClass('campaign-hover') || $('.cta').hasClass('cta-hover')) 
    { 
    $('.cta').show();   
} else { 
    $('.cta').hide(); 
} 

}; 

Answer 1

EDIT: Чистейший решение CSS. Если разметка не может измениться, вы можете легко использовать jQuery для динамического изменения разметки, если это приемлемо. См.: http://jsfiddle.net/W3wEd/6/.

.someClass:hover .someDescendentClass { /* set some style */ } 

Cheers,

Энди

Answer 2

function updateHover() { 
    if ($('.campaign-1').hasClass('campaign-hover') || $('.cta').hasClass('cta-hover')) 
    { 
     $('.cta').show(); 
     $('.campaign-1').find('a').css('opactiy','1');   
    } else { 
     $('.cta').hide(); 
     $('.campaign-1').find('a').css('opactiy','0.5'); 
    } 
}; 

Answer 3

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

Я хотел бы предложить, чтобы переместить промежуток в секции с помощью JS: http://jsfiddle.net/W3wEd/7/

Если вы не можете сделать, что вам придется вручную исправить поведение: http://jsfiddle.net/W3wEd/8/

Answer 4

Как вы счастливы сделать что-либо, использующее jQuery, и не может изменить разметку (по крайней мере, не в точности - отредактируйте ее), это способ.

Вы просто переместить .cta элемент в .campaign-1 элемент:

JQuery:

$(".cta").appendTo(".campaign-1"); 

$('.campaign-1').on('mouseenter', function(){ 
    $(this).addClass('campaign-hover'); 
    $('.cta').show(); 
}); 

$('.campaign-1').on('mouseleave', function(){ 
    $('.campaign-hover').removeClass('campaign-hover'); 
    $('.cta').hide(); 
}); 

CSS:

.campaign-1 { 
    background-color: black; 
    position: relative; 
} 

Демо: http://jsfiddle.net/W3wEd/9/