使用Pointer-event:none保持Hover属性

时间:2013-07-12 23:11:27

标签: jquery css events pointers click

我在背景图片下面有一个按钮。为了使按钮可单击,我添加了一个“指针 - 事件:无”。但是,我还想要一个精灵图像,我在hover上更改背景图像,指针事件也会禁用。有没有办法保持元素的悬停属性,同时让点击通过呢?

当点击#cover_button时,我搜索并尝试了jquery unbind click并返回false,但它没有用。

这是我的代码。如果我保留指针事件:无,我可以单击背景图像下面的按钮。但这会禁用悬停属性。如果我将其删除,我将无法点击。

#cover_button {
    pointer-event: none;
    position: absolute;
    width: 46px;
    height: 24px;
    left: 0;
    top: 0;
    background: url(http://s13.postimg.org/bqxlnbfs3/Like.png);
}

#cover_button:hover {
    background: url(http://www.moronacity.com/tech-journal/images/2011/February/small-Facebook-like-button-counter.gif);
}

修改
这是一个小提琴: 可点击但不可挽救 http://jsfiddle.net/3PXTK/1/

这是另一个:Hoverable但不可点击(我刚刚删除了指针 - 事件:无) http://jsfiddle.net/3PXTK/

1 个答案:

答案 0 :(得分:2)

你不能吃饼干而且吃饼干。首先,您必须了解指针事件的工作原理:

  

none会阻止指定的所有click,state和cursor选项   HTML元素

这意味着没有点击,没有悬停,没有活动 - 没有光标。你不能说好的我只想悬停而不是别的。

顺便说一句。 FB这样做是因为他们不允许像按钮那样进行任何更改。你不能改变外观,掩盖它等。