Question

我正在尝试进行图像悬停效果，其中链接从顶部移动到0：顶部：40％。问题是链接直接显示在顶部：当我悬停图像时为40％。这是我的代码：

<div class="featured">
<div class="img-hover">
<a href=""><i></i></a>
</div>
<img src=""/>
</div>

.featured .img-hover {
width:100%;
float:left;
height:100%;
position:absolute;
display:none;
background:rgba(26, 188, 156, 0.6);
}

.featured:hover .img-hover {
display:block;
}

.featured .img-hover a{
width:50px;
height:50px;
float:left;
position:absolute;
top:0;
font-size:2rem;
line-height: 4rem;
opacity:1;
margin-right:20px;
border-radius:50px;
border:2px solid #fff;
color:#fff;
text-align:center;
transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
}

.featured:hover .img-hover a{
top:40%;
}

Answer 1

您的转换位于 a 标记上，它只适用于＆＃34; .featured .img-hover＆＃34;水平。此外，＆＃34;显示的转换：无＆＃34;不是很好。我更新它以从不透明度0转换为1，它看起来更好。下面是JSFiddle和次要更新的CSS。如果你愿意的话，看看并调整一下。

http://jsfiddle.net/UVjFz/

.featured .img-hover {
    width:100%;
    float:left;
    height:100%;
    position:absolute;
    opacity:0;
    background:rgba(26, 188, 156, 0.6);
}

.featured:hover .img-hover {
    display:block;
}

.featured .img-hover a{
    width:50px;
    height:50px;
    float:left;
    position:absolute;
    top:0;
    font-size:2rem;
    line-height: 4rem;
    opacity:1;
    margin-right:20px;
    border-radius:50px;
    border:2px solid #fff;
    color:#fff;
    text-align:center;
    transition: all 0.5s ease-out;
    -webkit-transition: all 0.5s ease-out;
    -moz-transition: all 0.5s ease-out;
    -o-transition: all 0.5s ease-out;
}

.featured:hover .img-hover a{
    top:40%;
}

.featured:hover .img-hover {
    display:block;
    opacity:1;
}

.featured .img-hover {
    -webkit-transition: all 0.5s ease-out;
    -moz-transition: all 0.5s ease-out;
    -o-transition: all 0.5s ease-out;  
}

css从一个位置到另一个位置

1 个答案: