css - 复制chrome webstore一个元素效果

Question

这个有点棘手，我在这里创建了 jsfiddle http://jsfiddle.net/WXmcL/10/有点复制https://chrome.google.com/webstore/category/home插件容器。一切都很好，除了一个元素链接。

我需要定位

 <a class="link" href="linktoapp"></a>

正确的同时也让用户达到了

<a href="linktoinfo">Info1</a>

因为我不能在 a 元素中有任何 ul 或 div，所以我无法实现这种效果。是的，我可以做跨度，但我的评分包含 ul 、 div 等，我会在其中添加更多标记。如果您查看 chrome 商店，您始终可以链接到该应用程序并同时达到评级。他们将所有元素放在 a 标签内，但页面验证没有看到它。所以在我看来，这是在加载时使用 js 完成的，还是？

谢谢!

Answer 1

在构建效果一段时间后，您应该忘记验证。让它与您需要的标记一起工作，然后您可以坐下来拿走无法验证的内容并通过 javascript 注入(inject)它。

mootools 有一个很棒的 Element 构造函数。

new Element("a.linktoinfo[html=Info]").inject(element);

您可以通过构造函数选项对象将任何属性传递给它。

例如。

new Element("a", {
    "class": "foo",
    "href": "#",
    "events" : {
        click: function() {
            showInfo(this.getParent());
        }
    }
}).inject(element.getElement("a.link", 'after');

等等等等

顺便说一句，当你变形类时，只要确保它变形你不同的属性。在您的情况下，制作具有不同高度的 .myInfoOn/.myInfoOff 是有意义的。在未更改的其他值之间分配变形没有意义。

这种类型的变形会解析您在每个事件上传递的类中定义的所有 css 规则，实际上，您最好手动设置它。如果它是硬连线的，它的缩放比例会更小，我意识到 - 但你可以将其设置为你的类中的变量。