我已经创建了这些按钮图像。我试图做到这一点,以便当用户将鼠标悬停在图像上时,img元素的不透明度会发生变化,而顶部的元素(例如span和h2元素)则完全不透明(可见)。我将img元素专门定位在css中的悬停上,但是由于某些原因,所有元素的不透明度都发生了变化。为什么会这样呢?我在做什么错,我该如何解决?代码如下。
body {
background-color: black;
}
.featured-list li {
display: inline-block;
margin-right: .8%;
}
.featured-list a {
display: block;
}
.featured-list {
text-align: center;
padding: 0;
margin: 0 auto;
}
a.feature-img img {
width: 425px;
border-radius: 5px;
}
a.feature-img {
text-align: center;
}
.f-cta, .f-img-content h2 {
font-family: 'Abel',Helvetica,Arial,Lucida,sans-serif;
font-weight: 100;
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
}
.f-img-content h2 {
color: #fff;
top: 34%;
}
.f-cta {
background: #fff;
width: 50%;
border-radius: 3px;
padding: 7px;
color: #000;
top: 48%;
font-size: 1.3em;
}
.f-img-content {
position: relative;
text-align: center;
overflow: hidden;
}
a.feature-img:hover img {
opacity: .6;
}
<ul class="featured-list">
<li><a href="#" class="feature-img">
<div class="f-img-content">
<h2>Lorem Ipsum project title</h2>
<span class="f-cta">View Project</span>
<img src="https://i.imgur.com/EENJU66.gif">
</div>
</a></li>
<li><a href="#" class="feature-img">
<img src="https://i.imgur.com/EENJU66.gif">
</a></li>
<li><a href="#" class="feature-img">
<img src="https://i.imgur.com/EENJU66.gif">
</a></li>
<li><a href="#" class="feature-img">
<img src="https://i.imgur.com/EENJU66.gif">
</a></li>
</ul>
答案 0 :(得分:2)
更改元素的顺序,因此图像是第一位,然后是h2
和span
。这样可以解决问题。
<img src="https://i.imgur.com/EENJU66.gif">
<h2>Lorem Ipsum project title</h2>
<span class="f-cta">View Project</span>
答案 1 :(得分:2)
看起来像z-index
issue。只需将z-index:1
添加到.cta
和h2
。
opacity
的更改正在影响堆叠顺序,将半透明图像放在内容顶部。调整内容的z-index
可解决此问题。
body {
background-color: black;
}
.featured-list li {
display: inline-block;
margin-right: .8%;
}
.featured-list a {
display: block;
}
.featured-list {
text-align: center;
padding: 0;
margin: 0 auto;
}
a.feature-img img {
width: 425px;
border-radius: 5px;
}
a.feature-img {
text-align: center;
}
.f-cta,
.f-img-content h2 {
font-family: 'Abel', Helvetica, Arial, Lucida, sans-serif;
font-weight: 100;
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
z-index: 1;
}
.f-img-content h2 {
color: #fff;
top: 34%;
}
.f-cta {
background: #fff;
width: 50%;
border-radius: 3px;
padding: 7px;
color: #000;
top: 48%;
font-size: 1.3em;
}
.f-img-content {
position: relative;
text-align: center;
overflow: hidden;
}
a.feature-img:hover img {
opacity: .6;
}
<ul class="featured-list">
<li>
<a href="#" class="feature-img">
<div class="f-img-content">
<h2>Lorem Ipsum project title</h2>
<span class="f-cta">View Project</span>
<img src="https://i.imgur.com/EENJU66.gif">
</div>
</a>
</li>
<li>
<a href="#" class="feature-img">
<img src="https://i.imgur.com/EENJU66.gif">
</a>
</li>
<li>
<a href="#" class="feature-img">
<img src="https://i.imgur.com/EENJU66.gif">
</a>
</li>
<li>
<a href="#" class="feature-img">
<img src="https://i.imgur.com/EENJU66.gif">
</a>
</li>
</ul>