CSS：頂件的背景隱藏子元素溢出

這是一個垂直菜單所以黃色的「格」計數不固定，可能是5像它可能是7

現在，我有這個CSS應用一個div：

#main-menu { 
    width: 250px; 
    height: 100%; 
    padding-top: 50px; 
}

包含黃色DIV（沒什麼特別的）。然後我添加了一個「前」僞元件是這樣的：

#main-menu::before { 
    height:624px; 
    width:250px; 
    background-image: url("../img/SSC_fondgris_96_Background.png"); 
    content: " "; 
    position:absolute; 
    top:0; 
}

使用的圖像是隻與左邊透明背景和右側的灰色曲線。這導致上面的圖像。問題是，我想對黃色div有一個懸停效果，但我無法得到，因爲「before」元素位於頂部（這是爲了讓曲線隱藏溢出黃色項目），因此，「懸停」效果不適用於黃色div。

我想這是因爲懸停是在「before」僞元素上完成的，而這完全是我的問題。所以問題是：是否可以有一個圖像隱藏子元素的溢出，但允許這些孩子有懸停效果？ Bascailly，一個z-index的懸停效果：-D

的目標在這裏也將是避免使用JavaScript做這種事情......

來源

2016-07-13 ssougnez

您是否嘗試過使用SVG圖像呢？ –

不是，不。我不知道這可以解決問題。我需要做什麼？只需將SVG中的PNG轉換即可？ – ssougnez

哇...清晰準確。非常感謝 – ssougnez

使用pointer-events:none僞元素

從MDN

CSS屬性指針事件允許作者控制在什麼情況下（如果有的話）特定的圖形元素可以成爲鼠標事件的目標。當此屬性未指定時，visiblePainted值的相同特徵適用於SVG內容。

ul { 
 
    list-style: none; 
 
    width: 50%; 
 
    position: relative; 
 
} 
 
ul::before { 
 
    content: ''; 
 
    position: absolute; 
 
    width: 25%; 
 
    height: 100%; 
 
    top: 0; 
 
    right: 0; 
 
    background: rgba(255, 0, 0, 0.5); 
 
    pointer-events: none; 
 
} 
 
li { 
 
    padding: 25px 0; 
 
    background: #000; 
 
    margin-bottom: 1em; 
 
} 
 
li:hover { 
 
    background: orange; 
 
}

<ul> 
 
    <li></li> 
 
    <li></li> 
 
    <li></li> 
 
    <li></li> 
 
    <li></li> 
 
</ul>

來源

2016-07-13 14:03:40

這太棒了。我從來沒有遇到'pointer-events：none;'以前。關閉以進行調查：https：//developer.mozilla.org/en/docs/Web/CSS/pointer-events – Rounin

可以通過引入第三達到你想要的效果，透明元素，您將其放置在透明/灰色圖像的頂部。

如果你的第三個，透明元件是用黃色的div正好一致（下面兩層），那麼你可以申請:hover效果最上面的，透明的元素，它會看起來像最底層的元素響應懸停。

來源

2016-07-13 13:54:59 Rounin

Woul你有一個例子，因爲我沒有真正明白...請注意，我也有一個「:: after」僞元素用於繼續邊界直到頁面的底部。不僅如此，它還必須與IE9一起工作。 – ssougnez

如果您可以在上面的問題中提供更多代碼（包括HTML標記），那麼我可以基於您的示例進行構建。謝謝。（是的，它將與IE7向上... – Rounin

謝謝，但「Paulie_D」的答案是正確的。 – ssougnez

您應該能夠通過否定元素的指針事件「點擊通過」僞元素：

#main-menu::before { 
    height:624px; 
    width:250px; 
    background-image: url("../img/SSC_fondgris_96_Background.png"); 
    content: " "; 
    position:absolute; 
    top:0; 
    /* Add the below */ 
    pointer-events: none; 
}

...讓我知道如何爲你工作。

我需要補充的是瀏覽器的支持是有點躲閃，但 - 只有IE11 ... caniuse - pointer-events

來源

2016-07-13 14:03:39 Jayx

CSS：頂件的背景隱藏子元素溢出

回答

相關問題