Я использовал jQuery, чтобы добавить эффект перехода CSS, когда курсор мыши находится над заголовком моего сайта, заставляя его переходить с прозрачного на белый фон. У меня действительно странная и неожиданная проблема на устройствах с сенсорным экраном при добавлении дополнительного класса (.active).

Я могу только предположить, что это происходит на всех устройствах с сенсорным экраном, поскольку у меня есть только iPhone, чтобы проверить его, но когда я касаюсь большого пальца по заголовку, весь заголовок покрывается темным прямоугольником (как если бы это была гиперссылка с только что нажал).

Мало того, что это выглядит очень странно, это разрушает функциональность веб-сайта, потому что я больше не могу нажать на ссылку с логотипом / домом или кнопку в заголовке.

Я попробовал различные правила 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");
    });
});