active CSS pseudo-class and iscroll issue in firefox

Question

I am developing a mobile website. I am using Jquery mobile and iscroll plugin. Everything works fine in chrome. But while checking in firefox i could find the :active css styles written for the elements are not working.

here is the fiddle http://jsfiddle.net/zq5AW/

The active effect is working in chrome but not in firefox.

But when i removed the jquery.mobile.iscrollview-min.js include line. It started working in firefox also. Can anyone suggest a fix?

Note: Same question was found on googling

https://groups.google.com/forum/?fromgroups=#!topic/iscroll/lqPomh3y-TU

But there was no answers.

Answer 1

Mithunsatheesh, you have a conflict in between two libraries - jQuery and jQuery Mobile. Are you sure that you need two libraries loading at the same time?

If you change the order the way you load your libraries, then everything will work and you will get desired result:

Working Example

Other than that, I could offer you another solution, which would be just to use jQuery to get desired effect, as I don't see any other working possibility:

$(document).ready(function() {
    $("p").mousedown(function() {
        $(this).addClass('hovered');
    }).mouseup(function() {
        $(this).removeClass('hovered');
    });
});

Working Example 2

UPDATED:

Referring to your last comment, here is my final solution for you:

$(document).ready(function() {
    $("p").mousedown(function() {
        hovered = true;
        $(this).addClass('hovered');
    });
    $(document).mouseup(function() {
        if (hovered === true) {
            $("p").removeClass('hovered');
            hovered = false;
        }
    });
});

Working Example 3