將鼠標懸停在圖像和按鈕上

Question

我有一個圖像，按鈕的中心居中。 我想將鼠標懸停在圖像上以在圖像上添加不透明度並更改按鈕的顏色。 我的問題是，當我將鼠標懸停在圖片上時，我的按鈕也有不想要的不透明度。 我已經嘗試過z-index，但無法正常工作。

這是我到目前為止所做的：

 #asides .aside-map { min-height: 20px; margin-top: 20px; margin-bottom: 10px; text-align: center; -moz-transition: .3s ease-in-out; -o-transition: .3s ease-in-out; -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out; position:relative; width: 100%; height: 350px; background: url("http://placehold.it/350x150"); } #asides .aside-map .btn-main.map { position: relative; top: 50%; } #asides .aside-map:hover { opacity: 0.5; } #asides .aside-map:hover > .btn-main.map { background-color: rgb(254, 204, 0); border: 2px solid rgb(254, 204, 0); opacity: 1; } 

 <div id="asides"> <a class="aside-map"> <div class="btn btn-main map"> <span class="fa fa-map-marker">Show Map</span> </div> </a> </div> 

我無法在摘要中顯示圖像，但這是這樣的：

當我在圖像上徘徊時，這就是我所擁有的：

我的圖像和按鈕的不透明度均為0.5，我希望按鈕不具有任何不透明度

Answer 1

您的問題是opacity: 0.5為整個元素設置不透明度。

您可以使用background: rgba(0, 0, 0, 0.5)代替：

 #asides .aside-map { min-height: 20px; margin-top: 20px; margin-bottom: 10px; text-align: center; -moz-transition: .3s ease-in-out; -o-transition: .3s ease-in-out; -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out; position:relative; width: 100%; height: 350px; background: url("http://placehold.it/350x150"); } #asides .aside-map .btn-main.map { position: relative; top: 50%; } #asides .aside-map:hover { background: rgba(0, 0, 0, 0.5); } #asides .aside-map:hover > .btn-main.map { background-color: rgb(254, 204, 0); border: 2px solid rgb(254, 204, 0); opacity: 1; } 

 <div id="asides"> <a class="aside-map"> <div class="btn btn-main map"> <span class="fa fa-map-marker">Show Map</span> </div> </a> </div>