javascript - 图像和按钮的悬停效果

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>