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

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

我只能假设这种情况发生在所有触摸屏设备上，因为我只有我的iPhone来测试它，但是当我在标题上点击我的拇指时，整个标题被覆盖在一个黑暗的矩形中（好像它是一个超链接刚刚点击过）。

这看起来很奇怪，它破坏了网站的function，因为我无法再点击标题/主页链接或标题内的按钮。

我已经在媒体查询中尝试了各种CSS规则来阻止它，包括将.active类设置为display:none和pointer-events:none ，但是没有任何东西能够解决它。

UPDATE

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

HTML：

 
 
 
LUCIE AVERILL
 
PHOTOGRAPHY
 
  

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。

我找到了这个 可以解决你的问题的答案 。 以下是如何实现它：

 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重绘不解释…
但它看起来像是一个针对这个浏览器特定错误的工作 。