使覆蓋背景點擊可以

有沒有一種方法，在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

使覆蓋背景點擊可以

回答

相關問題