jQuery addClass and removeClass issue

Question

我根据翻转事件显示和定位<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

编辑：最干净的解决方案是CSS。 如果标记无法更改，则可以轻松地使用 jQuery 动态更改标记（如果可以接受）。 请参阅：http://jsfiddle.net/W3wEd/6/。

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

干杯

安 迪

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之间的区别，请参阅此处的说明）。

我建议使用 js： http://jsfiddle.net/W3wEd/7/在部分内移动跨度

如果无法执行此操作，则必须手动更正行为：http://jsfiddle.net/W3wEd/8/

Answer 4

由于您很乐意使用 jQuery 做任何事情并且无法更改标记（至少不能以确切的方式更改标记 - 编辑它），这是一种方法。

您只需将.cta元素移动到.campaign-1元素中：

j查询：

$(".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/