【问题标题】:active CSS pseudo-class and iscroll issue in firefoxFirefox 中的活动 CSS 伪类和 iscroll 问题
【发布时间】:2012-09-14 14:34:32
【问题描述】:

我正在开发一个移动网站。我正在使用 Jquery mobile 和 iscroll 插件。在 chrome 中一切正常。但是在检查 Firefox 时,我发现为元素编写的 :active css 样式不起作用。

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

主动效果在 chrome 中有效,但在 Firefox 中无效。

但是当我删除 jquery.mobile.iscrollview-min.js 包含行时。它也开始在 Firefox 中工作。任何人都可以提出解决方案吗?

注意:在谷歌上发现了同样的问题

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

但没有答案。

【问题讨论】:

  • 你能创建一个小提琴或某种形式的演示吗?
  • jsmobile 很烂是我个人的经验,只是让您的网站像任何普通网站一样,但在样板 - html5boilerplate.com (样板是一个移动优化“模板”,用于构建您的网站,因此它们加载更快)
  • @SimonPertersen:你的意思是说 jquery mobile 很烂?还是滚动?
  • 不太了解 iscroll,但我的缓动滚动项目似乎是一个 gr8 解决方案dropbox.com/sh/dv0lcdwg71m8bt2/VrOPVOq6pz

标签: jquery css jquery-mobile pseudo-class iscroll


【解决方案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

【讨论】:

  • 在您的示例中,isroll 效果因订单而丢失。尝试单击小提琴中的 firefox 文本并拖动。它拖在我发布的小提琴中,现在 iscroll 效果丢失了。请调查一下。感谢兄弟的努力。
  • 不客气!我预计会有其他后续问题。你能告诉我为什么要在一页上加载两个版本吗?为什么不把手机版和桌面版分开呢?你会在两个平台上让它更轻,让生活更轻松吗?
  • 兄弟。包含的所有库都需要让 iscroll 与 jquery mobile 一起使用.. 如github.com/watusi/jquery-mobile-iscrollview
  • 我看到了它们的包含方式——就像你一样。尝试先将它们放在您的本地主机上。我下载了那个图书馆,图书馆里的一切对我来说都很好。你也读过这个吗:github.com/watusi/…
  • @mithunsatheesh 请检查我更新的答案。 :) 祝你的脚本好运!
【解决方案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/

【讨论】:

  • 抱歉,没注意到。在看到你的答案后,就为我的答案写了相同的附加解决方案。为你投票。
  • @Jrod :兄弟..只有一个问题。当我单击并拖动 firefox 文本时,它会获得悬停效果。但是一旦我摆脱它..悬停效果不会被删除。对不起,如果我错了。
  • @mithunsatheesh 您可以将 mouseup 事件修改为在文档上,以便任何鼠标向上触发该功能并从 .act 中删除类 active 这是一个示例:jsfiddle.net/zq5AW/5跨度>
猜你喜欢
  • 1970-01-01
  • 2015-08-06
  • 1970-01-01
  • 2016-09-13
  • 1970-01-01
  • 1970-01-01
  • 2023-04-07
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多