添加背景图像时不会出现CSS悬停效果
问题描述:
我在div main-container
内部的按钮上添加了css悬停效果。里面还有一个background
div,里面有一个layer
div。问题是每次都有一个背景图像悬停效果不显示,但如果我删除背景图像,效果是可见的。我该如何解决? demo添加背景图像时不会出现CSS悬停效果
.background {
position: relative;
}
.background img{
max-width:100%;
\t max-height:800px;
}
.layer {
background-color: rgba(248, 247, 216, 0.7);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.btn {
\t border: none;
\t font-family: inherit;
\t font-size: inherit;
\t color: inherit;
\t background: none;
\t cursor: pointer;
\t padding: 25px 80px;
\t display: inline-block;
\t margin: 15px 30px;
\t text-transform: uppercase;
\t letter-spacing: 1px;
\t font-weight: 700;
\t outline: none;
\t position: relative;
\t -webkit-transition: all 0.3s;
\t -moz-transition: all 0.3s;
\t transition: all 0.3s;
}
.btn:after {
\t content: '';
\t position: absolute;
\t z-index: -1;
\t -webkit-transition: all 0.3s;
\t -moz-transition: all 0.3s;
\t transition: all 0.3s;
}
.btn:before {
\t speak: none;
\t font-style: normal;
\t font-weight: normal;
\t font-variant: normal;
\t text-transform: none;
\t line-height: 1;
\t position: relative;
\t -webkit-font-smoothing: antialiased;
}
/* Button 1 */
.btn-1 {
\t border: 3px solid #fff;
\t color: #fff;
}
.btn-1f {
\t overflow: hidden;
}
.btn-1f:after {
\t width: 101%;
\t height: 0;
\t top: 50%;
\t left: 50%;
\t background: #000;
\t opacity: 0;
\t -webkit-transform: translateX(-50%) translateY(-50%);
\t -moz-transform: translateX(-50%) translateY(-50%);
\t -ms-transform: translateX(-50%) translateY(-50%);
\t transform: translateX(-50%) translateY(-50%);
}
.btn-1f:hover,
.btn-1f:active {
\t color: #0e83cd;
}
.btn-1f:hover:after {
\t height: 75%;
\t opacity: 1;
}
.btn-1f:active:after {
\t height: 130%;
\t opacity: 1;
}
.background {
position: relative;
\t width: inherit;
\t height:inherit;
\t background-image: url("http://www.wallpapereast.com/static/images/nature-wallpaper-desktop-308_ySxPe7m.jpg");
}
.main-container{
\t width:100%;
\t height:745px;
\t position:relative;
}
.cities{position:absolute;bottom:0;}
<div class="main-container">
<div class="background">
<div class="layer">
</div>
</div>
<div class="cities"><p>
<button class="btn btn-1 btn-1f"><a href="#">Bangalore</a></button>
</p>
</div>
答
我检查你的代码。 得Z-索引上象下面背景负,
.background {
background-image: url("http://www.wallpapereast.com/static/images/nature-wallpaper-desktop-308_ySxPe7m.jpg");
height: inherit;
position: relative;
width: inherit;
z-index: -1;
}
答
给该按钮z-index
。
如:z-index: 999;
答
你可以这样做:
.btn{
z-index: 99;
}
.btn:hover a{
color: #efefef;
}
的jsfiddle不打开让我看看。你可以通过编辑问题并按下Ctrl + M来创建一个本地代码片段吗? –
我不确定我是否理解这个问题。 我知道背景图像总是在背景颜色之上。您可以尝试使用z-index来修复它。 – Alexis
请考虑在有帮助的情况下回答问题,感谢人们投入您的时间和精力解决您的问题 – Trix