之前僞元素覆蓋內部的內容

因此，我創建了一個div作爲其父母與span元素裏面，保留家長的標題，我已經定義css之前父母的僞元素（:before），所以當用戶盤旋在元素上，它有一個很好的轉換但問題是：:before涵蓋了span元素，所以標題被隱藏，這當然是不可接受的！之前僞元素覆蓋內部的內容

這裏的一對的jsfiddle示例代碼：http://jsfiddle.net/msU6p/4/

這裏的HTML：

<div class="menuItem_Large" id="node_1_menu"> 
    <span>menu item 1</span> 
</div>

和風格：

.menuItem_Large 
{ 
    position: absolute; 
    left: 0px; 
    display: inline-block; 
    padding-left: 6px; 
    padding-right: 6px; 
    height: 20px; 
    line-height: 16px; 
    vertical-align: middle; 
    background-image : url('http://i58.tinypic.com/21eyrk8.png'); 
    background-repeat: repeat; 
    cursor:pointer; 
} 

.menuItem_Large:before 
{ 
    content:""; 
    position:absolute; 
    top:0px; 
    left:0px; 
    width:0%; 
    height:20px; 
    background-color:rgba(0,200,255,1); 
    transition:width 0.3s ease-out; 
} 

.menuItem_Large:hover:before 
{ 
    width:100%; 
} 

.menuItem_Large span 
{ 
    color: white; 
    font-size: 16px; 
}

請注意：

我嘗試使用上跨度z-index將其設置爲2左右，但它不工作，當我設置before元素z-index負它去下父母的background-image這是不好的

有誰知道哪裏是我的錯誤或我可以做些什麼來使這項工作只使用css？

由於提前

來源

2014-07-21 Mehran

嘗試不透明[FIDDLE]（http://jsfiddle.net/GopsAB/msU6p/5/）。你想要這個 –

@Harry我希望before元素覆蓋整個父元素，但不是跨度中的文本，我希望文本顯示在最上面 – Mehran

@Mehran：看起來你想要類似於Anon的東西發佈。 – Harry

display:block; position:relative;爲<span>可以幫助你。 DEMO

來源

2014-07-21 13:59:16 Anon

謝謝匿名，它只是解決了這個問題，：D – Mehran

你有一個想法，爲什麼職位：親屬是必需的？我試圖做類似Mehran所要求的事情，但我外部div的孩子不僅僅是一個簡單的跨度，並且爲每個孩子設置相對位置將是一種痛苦。 –

：之前（與位置：絕對）與跨度齊平並覆蓋他。 Span msut有更多的z-index：之前，但只有相對，絕對或固定塊纔能有z-index。您也可以嘗試在您的變體中使用z-index：-1。 – Anon

之前僞元素覆蓋內部的內容

回答

相關問題