My jQuery toggleclass function is creating a hyperlink effect on touchscreen devices

Question

I have used jQuery to add a css transition effect when the mouse hovers over the header of my site, causing it to turn from transparent to a white background. I\'m having a

Answer 1

Since it seems that the .active class don't apply only on iPhones.
(See comments below the question).
Your browser is probably Safari.

I found this SO answer that may solve your problem. Here is how to implement it:

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

Why does it forces Safari to redraw isn't explained...
But it look's like a working walk-around for this browser specific bug.