我有一张图片,中间有一个按钮。当我将鼠标悬停在图像上时,我希望在图像上添加不透明度并更改按钮的颜色。我遇到的问题是,当我将鼠标悬停在我的图像上时,我的按钮也有一个我不想要的不透明度。我试过 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,我希望我的按钮没有任何不透明度
最佳答案
您的问题是 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>
关于javascript - 图像和按钮的悬停效果,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42006147/