jquery - 我的 jQuery toggleclass 函数正在触摸屏设备上创建超链接效果

Question

当鼠标悬停在我网站的标题上时，我使用 jQuery 添加了一个 css 过渡效果，导致它从透明变为白色背景。添加附加类 (.active) 时，我在触摸屏设备上遇到了一个非常奇怪和意外的问题。

我只能假设这发生在所有触摸屏设备上，因为我只有我的 iPhone 可以用来测试它，但是当我用拇指轻敲标题时，整个标题都被一个深色矩形覆盖(好像它是一个刚刚被点击的超链接)。

这不仅看起来很奇怪，而且破坏了网站的功能，因为我无法再点击 Logo /主页链接或标题中的按钮。

我在媒体查询中尝试了各种 CSS 规则来阻止这种情况，包括将 .active 类设置为 display:none 和 pointer-events:none ，但没有任何方法可以修复它。

更新

这是我的实际网站代码。这里有很多内容，但我似乎无法在 JSFiddle 中正确复制它。

HTML:

<header class="header">
    <div class="header-container">
        <h5 class="logo" id="lucieaverill">LUCIE AVERILL</h5>
        <h5 class="logo" id="photography">PHOTOGRAPHY</h5>
    <div class="mobile-menu">
</header>       

CSS:

.header {
    width: 100%;
    height: 100px;

    position:absolute;
    top:0;
    z-index:2;

    transition: all 0.4s;

    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;

    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
}


.header.active {
    background-color:#fff;
}

.header-container {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;

    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;

    justify-content: space-between;
    -webkit-justify-content: space-between;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;

    height:inherit;
    width:85%;
    max-width:1600px;
    overflow:hidden;
}

a.logo {
    height:15px;
    font-family: ProximaNovaW01-Bold, Arial, Helvetica, sans-serif;
    font-size:19px;
}

h5.logo#lucieaverill {
    color:#ffffff !important;
    transition: all 0.4s;
}

h5.logo#photography { 
    color:#ffffff !important;
    transition: all 0.6s;
}

h5.logo#lucieaverill.active {
    color:#3a3a3a !important;   
}

h5.logo#photography.active {
    color:#b2b3b3 !important;
    transition: all 0.3s;
}

Javascript:

jQuery(document).ready(function($){    

$(".header").hover(function(){
        $(".header, h5.logo#lucieaverill, h5.logo#photography").addClass("active");
    }, function(){  // Callback
        $(".header, h5.logo#lucieaverill, h5.logo#photography").removeClass("active");
    });
});

Answer 1

因为 .active 类似乎仅适用于 iPhone。
(请参阅问题下方的评论)。
您的浏览器可能是 Safari。

我找到了 this SO answer 可能解决您的问题。以下是实现方法:

jQuery(document).ready(function($){    

$(".header").hover(function(){
        $(".header, h5.logo#lucieaverill, h5.logo#photography").addClass("active");
            // Forces Safari to redraw
        $("body").addClass("dummyClass").removeClass("dummyClass");

    }, function(){  // Callback
        $(".header, h5.logo#lucieaverill, h5.logo#photography").removeClass("active");
            // Forces Safari to redraw
        $("body").addClass("dummyClass").removeClass("dummyClass");
    });
});

为什么 强制 Safari 重绘没有解释......
但它看起来像是针对此浏览器特定错误的有效解决方法。