Моя функция jQuery toggleclass создает эффект гиперссылки на устройствах с сенсорным экраном

Я использовал 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");
    });
});
 Louys Patrice Bessette29 мая 2016 г., 01:08
На вашем сайте, на Galaxy S3, фон не меняет цвета, и я вижу маленькую синюю рамку над «Люси Аверилл». Если я удержу его, заголовок исчезнет. Я использую Chrome-Mobile ...
 Louys Patrice Bessette29 мая 2016 г., 23:45
 Jack199129 мая 2016 г., 11:18
Вот более наглядный пример о том, что я имею в виду под серым полем над ссылками при нажатии. Я думаю, что это может быть характерно для IOS на iPhone. Возможно, мне придется искать способ отключить.activeкласс на устройствах с сенсорным экраном с JQuery, потому что, если я дам емуdisplay:none в моей таблице стилей она все еще действует как гиперссылка, но при нажатии перестают работать логотип и кнопка меню.
 Louys Patrice Bessette29 мая 2016 г., 01:19
Я взялСкриншот... может помочь! Добавьте это к вашему вопросу.
 Jack199129 мая 2016 г., 01:06
Привет Рой, спасибо за твой комментарий. В моем вопросе мне следовало бы прояснить, что я не пытаюсь добиться того же эффекта при просмотре на мобильном телефоне. Я больше обеспокоен удалением.active класс в целом, что по некоторым причинам оказывается трудным, даже сdisplay:none
 Jack199129 мая 2016 г., 02:44
Не уверен, почему это может быть, но попробуйте прямо сейчас - я обновил домашнюю страницу до исходной страницы, которую я отправил вам. Причина, по которой я установил пустую страницу, заключалась в том, чтобы люди не спотыкались о веб-сайт, пока я работал над ним, пока он работает.
 Randy29 мая 2016 г., 01:08
Это очень распространенное поведение, но проблема не во всех мобильных браузерах (версиях). Набор инструментов Chrome для разработки мобильных тестов имел такое поведение в моем приложении сегодня днем, я исправил его с помощью ответа, приведенного в другом комментарии.
 Louys Patrice Bessette29 мая 2016 г., 01:38
Теперь ... я все еще вижу синий прямоугольник. Но на сенсорном фоне фон становится белым. Я вижу это только одну секунду ... Тогда вся страница белая (без текста).
 Louys Patrice Bessette29 мая 2016 г., 00:56
Я попробовал вашу скрипку на Samsung Galaxy S3 ... И он работает как положено ... Точно так же, как на моем компьютере.
 Jack199129 мая 2016 г., 01:24
И да, хорошая идея, я сделаю это сейчас.
 Jack199129 мая 2016 г., 01:41
Я думаю, это потому, что я по ошибке установил ссылку на мертвую страницу, извините за это, я не хотел путать вещи. Я собираюсь обновить вопрос с моим реальным кодом веб-сайта, и я посмотрю, смогу ли я загрузить скриншот того, что происходит мой конец
 Louys Patrice Bessette29 мая 2016 г., 08:18
Похоже, теперь вы будете работать как на Chrome, Firefox, так и на Chrome-mobile. ;) Отредактируйте ответ с тем, что вы сделали, и отметьте его зеленым. Это не позволит людям терять свое время, пытаясь ответить вам.
 Roy29 мая 2016 г., 01:01
Вы проверили этот ответ?stackoverflow.com/a/2891155/6022243
 Jack199129 мая 2016 г., 01:03
Это действительно странно, мне интересно, почему мой iphone не делает то же самое ... Не могли бы вы сделать мне одолжение и попробовать это на моем реальном сайте? Ссылка на www.lucieaverillphotography.co.uk/home - В настоящее время я не могу нажать на значок меню.
 Louys Patrice Bessette29 мая 2016 г., 02:34
Есть проблема. И, может быть, больше сейчас. Я просто не могу вернуться на ваш сайт, так как нажал на эту скрытую мертвую ссылку ... Белая страница. Я думал, что вы использовали сеанс var ... Поэтому я закрыл свои 25 вкладок (!), Чтобы полностью закрыть браузер ... Но нет. Просто не могу вернуться на ваш сайт. ДАЖЕ с другим браузером (FF) на ПК ... Так что это тоже не cookie.
 Jack199129 мая 2016 г., 01:24
Ах да, я понимаю, что вы имеете в виду, это «домашняя» гиперссылка на логотип, но я еще не установил правильный размер шрифта, поэтому есть разрыв строки. Я только что попробовал это в chrome, и меню работает, но это раздражающее серое поле все еще присутствует при удерживании заголовка.
 Randy29 мая 2016 г., 01:09
Jquery имеет метод, чтобы получить ширину области просмотра, попробуйте установить.active только на больших экранах?
 Jack199130 мая 2016 г., 19:14
Привет, Луис, извини, я только что видел твой комментарий. Я был без подключения к интернету. Последние пару дней. Я попробую этот jquery, когда вернусь домой. Спасибо :)
 Louys Patrice Bessette29 мая 2016 г., 02:21
И скрипка все еще работает как положено на Chrome-Mobile:Скриншот.
 Louys Patrice Bessette29 мая 2016 г., 01:41
Попытка перезагрузить страницу не удалась ... Сайт весь белый (но нормально на ПК).
 Louys Patrice Bessette29 мая 2016 г., 01:23
Я предлагаю вам отредактировать свой вопрос и показать более релевантный код вашего сайта вместо скрипки, которая не ведет себя так же ... На Galaxy S3 / Chrome-mobile.
 jian dan29 мая 2016 г., 01:04
у моего андроида (сяоми) нет темного прямоугольника.
 Jack199129 мая 2016 г., 11:15
Привет, Луис, проблема все еще происходит, к сожалению, с моей стороны. Все, что я сделал, это изменил домашнюю страницу с пустой страницы на рабочую страницу. Если я нажимаю и удерживаю в любом месте заголовка, который не является логотипом или кнопкой меню, он все равно закрывает заголовок серым полем, как если бы я нажимал гиперссылку. ВотСкриншот о чем я Сравните это с тем, как оно выглядитбез, это трудно увидеть, но вы можете заметить линию в нижней части div, и что белый текст темнее от того, чтобы быть покрытым.
 Louys Patrice Bessette29 мая 2016 г., 02:13
Я возился с твоим обновлением кода. Обратите внимание, что я установил телоbackground-color к черному ... Так что мы можем что-то увидеть Я также добавил несколько пропавших без вести</div>s.Скрипка здесь

Ответы на вопрос(1)

.active класс не применяетсятолько на айфонах.
(См. Комментарии ниже вопроса).
Ваш браузер, вероятно, Safari.

я нашелэтот так ответ тотможет решить вашу проблему. Вот как это сделать:

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");
    });
});

Зачем Является лисил Сафари перерисовать не объясняется ...
Но это похоже на рабочую прогулку для этого конкретного браузераошибка.

Ваш ответ на вопрос