使覆盖背景点击可以

有没有一种方法，在CSS中，我可以使元素能够点击通过。我有一个absolute定位<div>覆盖链接。我希望能够点击链接到覆盖<div>。叠加层具有大部分透明背景，并且链接没有覆盖像素。使覆盖背景点击可以

我试过background: url('...') transparent，但无济于事。

Here是一个展示我的问题的JSFiddle。该链接可以在IE8中点击，但不能在FireFox中点击。我想要做的是在#underlay div中创建图像代码。覆盖图是这样的，我可以在底部和顶部有一个从固体到透明的渐变背景，这样我就可以使图像排列成'滚到没有'，而不会一下子消除整个图像，如果这样很有意义（如果任何人有Android手机，请尝试滚动备忘录并观看屏幕的顶部/底部 - 备忘录会淡入）。

来源

2011-01-27 Bojangles

@Knu：覆盖DIV是，像它覆盖的东西，一个块级元素。制作一个跨行内嵌块或其他东西可能会有效。 – Bojangles 2011-01-28 12:33:55

我已通过添加pointer-events: none;绝对块固定您的问题。

body { 
 
    margin: 0; 
 
    padding-left: 10px; 
 
    font: 20px Arial, sans-serif; 
 
    line-height: 30px; 
 
} 
 
a:hover { 
 
    color: red; 
 
} 
 
#overlay-blocking, 
 
#overlay-passing{ 
 
    position: absolute; 
 
    height: 30px; 
 
    width: 10em; 
 
    left: 0; 
 
} 
 

 
#overlay-blocking { 
 
    top: 30px; 
 
    background: rgba(0,100,0, .2);  
 
    pointer-events: none; 
 
} 
 
#overlay-passing { 
 
    top: 0; 
 
    background: rgba(100,0,0, .2);  
 
}

<a href="#">Link blocked</a><br> 
 
<a href="#" title="hoverable">Link available</a><br> 
 
<a href="#" title="hoverable">Link available</a><br>  
 

 
<div id="overlay-blocking"></div> 
 
<div id="overlay-passing"></div>

来源

2011-05-27 07:06:10 tibalt

我不认为这是可能的，因为图像仍然是一个完整的框。但你有没有试过这些Image Maps？似乎这就是你想要的。

其他选项

你也可以单独的图像变成2，并确保您的箱子没有覆盖你的课程的链接。

来源

2011-01-27 21:47:33 Marnix

考虑一下，我可以分割图像。谢谢！ – Bojangles 2011-01-27 22:20:58

不，我们不会在2011年分割图像。如果您必须使用冗余元素，但不要分割图像，则不需要。 – reisio 2011-01-28 01:21:05

@reisio - 是啊，我是在我的反应有点仓促 - 分裂的图像没有工作:-( – Bojangles 2011-02-01 18:22:11

也许这个答案会是一些使用的给你，如果你可以嵌套链接里面的叠加：With only CSS, is it possible to trigger :hover and click events underneath an element?

来源

2011-01-27 21:48:42

使覆盖背景点击可以

回答

相关问题