添加背景图像时不会出现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>

来源

2015-12-21 qwertp

的jsfiddle不打开让我看看。你可以通过编辑问题并按下Ctrl + M来创建一个本地代码片段吗？ –

我不确定我是否理解这个问题。我知道背景图像总是在背景颜色之上。您可以尝试使用z-index来修复它。 – Alexis

请考虑在有帮助的情况下回答问题，感谢人们投入您的时间和精力解决您的问题 – Trix

我检查你的代码。得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; 
}

来源

2015-12-21 14:08:33 iyyappan

-1

给该按钮z-index。

如：z-index: 999;

来源

2015-12-21 14:14:38 Mahi

你可以这样做：

.btn{ 
    z-index: 99; 
} 
.btn:hover a{ 
    color: #efefef; 
}

来源

2015-12-21 14:24:48 Trix

添加背景图像时不会出现CSS悬停效果

回答

相关问题