悬停在图像和按钮上的效果

Question

我的图像中间有一个按钮。当我将鼠标悬停在我的图像上时，我希望在我的图像上添加不透明度并更改按钮的颜色。我的问题是，当我将鼠标悬停在我的图像上时，我的按钮也具有我不想要的不透明度。我尝试过z-index，但它没有用。

这是我到目前为止所做的：

＆＃13;

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

我无法在代码段中显示图片，但这就是它的样子：

当我在我的形象上徘徊时，这就是我所拥有的：

我的图片和按钮都有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>