jquery - jQuery addClass 和 removeClass 问题

Question

<span>我根据翻转事件显示和定位 a 。翻转也触发了不透明度的变化。一切都运行良好，除了当隐藏元素可见并且您滚动该元素时移除不透明度类。

因此，在下面的小提琴中，如果您翻转“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如果 span 是该部分的子元素，则不会发生这种情况（顺便说一句，这正是and之间的区别mouse-leave，请参见此处的解释）。

我建议使用 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/