Question

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

因此，在下面的小提琴中，如果翻转“Hello”元素，则会删除背景图像不透明度。

我无法更改标记，因此jQuery将需要完成所有提升。

谢谢！

$('.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

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 2

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

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

干杯，

安迪

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/

jQuery addClass和removeClass问题

4 个答案: