僅覆蓋父圖像的子元素

Question

我有一個菜單，我想要菜單項的活動狀態和懸停狀態。我的問題在這兩個圖像中最好地說明了。綠色背景顏色應該只覆蓋深橙色區域（這是一個圖像）。

這是我現在菜單：

而且這是我希望它是：

哪種方法是最好的削減綠色元素的底部得到這個效果？

中的jsfiddle到目前爲止我的代碼：

http://jsfiddle.net/HC5qC/

CSS：

nav ul { 
    padding: 0; 
    list-style-type: none; 
    position: absolute; 
    right: 96px; 
    top: 37px; 
} 

nav li { 
    float: left; 
} 

nav a { 
    text-decoration: none; 
    font-weight: 400; 
    font-size: .9375em; 
    text-transform: uppercase; 
    letter-spacing: 0.05em; 
    color: #fff; 
    padding: 54px 15px 65px 15px; 
    overflow: hidden; 

} 

.current-menu-item a, 
.current-menu-item a:hover { 
    background: #79bd8f; /* Old browsers */ 
    background: -moz-linear-gradient(top, #79bd8f 30%, #00a388 99%); /* FF3.6+ */ 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(30%,#79bd8f), color-stop(99%,#00a388)); /* Chrome,Safari4+ */ 
    background: -webkit-linear-gradient(top, #79bd8f 30%,#00a388 99%); /* Chrome10+,Safari5.1+ */ 
    background: -o-linear-gradient(top, #79bd8f 30%,#00a388 99%); /* Opera 11.10+ */ 
    background: -ms-linear-gradient(top, #79bd8f 30%,#00a388 99%); /* IE10+ */ 
    background: linear-gradient(to bottom, #79bd8f 30%,#00a388 99%); /* W3C */ 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#79bd8f', endColorstr='#00a388',GradientType=0); /* IE6-9 */ 

} 

nav a:hover { 
    background: #6b1600; 
    background: rgba(107, 22, 0, 0.2); 
} 

Answer 1

我不知道這樣的事情FIDDLE可能讓你開始。

我會多花一點時間來看看我們可以接近你想要的東西。

但是，這個概念是把一個：之後或：之前，或絕對定位的「覆蓋」，並能夠點擊框後面。

CSS

.selector { 
    width: 295px; 
    height: 100px; 
    overflow: hidden; 
    background-color: transparent; 
    position: relative; 
} 
.button1 { 
    float: left; 
    width: 32%; 
    height: 100%; 
    border: 1px solid white; 
    background-color: blue; 
} 
.selector:after { 
    content: ''; 
    width: 300px; 
    height: 30px; 
    position: absolute; 
    top: 85px; 
    left: 0px; 
    transform: rotate(-3deg); 
    background-color: red; 
}