Question

我正在尝试制作可在不使用闪光灯的情况下点击的精灵。单击（或触摸）时，它们应显示弹出气泡。当再次点击屏幕（任何地方，无论是在图标上，泡沫上，还是在两者之外），它都应该被忽略。问题是可点击区域与精灵不对齐。

以下是网页（仅适用于使用Webkit的浏览器，因此适用于iOS或Android的Safari，Chrome或默认浏览器。）

https://dl.dropbox.com/u/60354330/site/index.html

每个管道的可点击区域是一个与精灵相同大小的区域，但是以蒸汽流出的一侧外侧边缘的角为中心。

我在Safari 6（Mac）iOS 6，Android 4.0浏览器和Chrome（Windows 7版本21？）上测试了这一点，所有这些浏览器的行为都是一样的。

有关为什么不排队或如何修复它的任何建议？

所有相关代码都在index.html中。以下是我认为相关的摘录：

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>CSS sprite demo</title>

        <style type="text/css">
            .spipe {
                position: absolute;

                width: 1px;
                height: 1px;

                background: url(spipe.png) no-repeat 0 0;
                background-size: 1px 20px;

                -webkit-animation-name: spipe;
                -webkit-animation-duration: 1.0s;
                -webkit-animation-iteration-count: infinite;
                -webkit-animation-timing-function: linear;
                -webkit-transform-origin: top left;
            }

            .left {
                -webkit-transform: scale(100, 60);
            }
        </style>
    </head>
    <body>
        <div id="toppipe" class="popup spipe left" style="top:120px;left:200px;" popupHTML="Hello, Top"></div>
    </body>
</html>

它会缩小并备份，否则它会逐帧滚动。

似乎问题在于可点击区域从与div的其余部分不同的原点进行扩展，但如果我将变换原点更改为其他内容，例如50％50％，它仍然会偏移相同的数量。翻译div以相同的方式应用于可点击区域和div，因此也不能用于解决问题。

Answer 1

这不像我想的那样整洁，但是我发现我可以通过添加一些像这样的jQuery代码来实现我想要的结果：

$(function() {
    $(".target").each(function(index) {
        var original = $(this);
        var clone = original.clone();
        clone.insertAfter(original);
        original.removeAttr("id"); /* Ensure each id is only used once. */
        original.css("width","1px");
        original.css("height","1px");
        clone.attr("class","popup");
    });
});

现在，对于我用类目标制作的每个div，它就像我正在创建两个div。第一个div将包含webkit CSS3动画，而第二个div将透明地放在它上面并响应点击。

暗纹？也许。但它让所有想要编辑我的页面的人只需要查看HTML文件，而不必触及CSS或脚本（这就是我想要的。）

编辑：我发现了一个小问题，即图片错位的div有时会阻止点击可点击的div。这是通过添加“pointer-events：none;”来解决的。到我的CSS。

可点击的区域没有与div的显示对齐？

1 个答案: