Question

我正在开发一个移动网站。我正在使用Jquery mobile和iscroll插件。铬的一切都很好。但是在检查firefox时，我发现为元素编写的：active css样式不起作用。

这是小提琴 http://jsfiddle.net/zq5AW/

活动效果在chrome中有效但在firefox中没有。

但是当我删除jquery.mobile.iscrollview-min.js包含行时。它也开始在firefox中工作。有人可以建议修复吗？

注意：在google搜索中发现了同样的问题

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

但没有答案。

Answer 1

Mithunsatheesh，两个库之间存在冲突--jQuery和jQuery Mobile。您确定需要同时加载两个库吗？

如果您按照加载库的方式更改顺序，那么一切都会正常工作，您将获得所需的结果：

Working Example

除此之外，我可以为您提供另一种解决方案，这只是为了使用jQuery来获得理想的效果，因为我没有看到任何其他工作可能性：

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

Working Example 2

更新：

参考您的上一条评论，以下是我的最终解决方案：

$(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

Answer 2

我希望我可以肯定地说是什么导致了这个问题，但我不能。我对该问题的理解是，该javascript文件中的某些内容阻止了通常会触发:active伪类的默认浏览器操作。

您可以通过在mousedown / mouseup

上添加和删除元素来解决此问题

CSS

.act { color:#000; }
.act:active, .active { color:#FFF; }

JS

$('.act').mousedown(function() {
    $(this).addClass('active');
});

$('.act').mouseup(function() {
    $(this).removeClass('active');
});

这也是一个工作小提琴： http://jsfiddle.net/zq5AW/3/

firefox中的活动CSS伪类和iscroll问题

2 个答案:

更新：