Minha função de toggleclass do jQuery está criando um efeito de hiperlink em dispositivos touchscreen
Eu usei o jQuery para adicionar um efeito de transição css quando o mouse passa o mouse sobre o cabeçalho do meu site, fazendo com que ele passe de transparente para um fundo branco. Estou tendo um problema realmente estranho e inesperado nos dispositivos touchscreen ao adicionar a classe adicional (.active
)
Só posso supor que isso aconteça em todos os dispositivos com tela sensível ao toque, pois só tenho meu iPhone para testá-lo, mas quando bato meu polegar no cabeçalho, todo o cabeçalho é coberto por um retângulo escuro (como se fosse um hiperlink que tivesse acabou de ser clicado).
Isso não apenas parece muito estranho, como também está arruinando a funcionalidade do site, porque não consigo mais tocar no link do logotipo / home ou no botão dentro do cabeçalho.
Tentei várias regras CSS dentro de uma consulta de mídia para interromper isso, incluindo a configuração do.active
classe paradisplay:none
epointer-events:none
, mas nada foi capaz de corrigi-lo.
ATUALIZAR
Aqui está o código do meu site real. Há muito aqui, mas não consigo replicar isso corretamente em um 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");
});
});