javascript – 如何在css悬停覆盖上显示字体真棒图标(如,视图)？

2019年7月27日 161次阅读

当我将鼠标悬停在div标签之上时,我会显示一个css叠加层,我想在叠加层上添加几个按钮(喜欢和分享)我该怎么做？

这是我的悬停代码

.portfolio-item img {
    width:100%;
    vertical-align:top;
}
.portfolio-item:after {
    content:'\A';
    position:absolute;
    width:100%; height:100%;
    top:0; left:0;
    background:rgba(0,0,0,0.6);
    opacity:0;
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
}
.portfolio-item:hover:after {
    opacity:1;
}

#like {        
    position: absolute;
    top: 50%;
    left: 50%;
    width: 70px;
    height: 70px;
    margin: -35px 0 0 -35px;
    z-index: 10;
}

javascript用于创建div

var element = document.createElement("div");
element.setAttribute("id",listItem"+i);
element.setAttribute("class","col-md-4  portfolio-item");
output.appendChild(element);

javascript来显示叠加图标

var ele = document.createElement("div");
ele.setAttribute("id","like");
ele.setAttribute("class","like"+i);

document.getElementById("red"+i).appendChild(ele);

HTML代码

 <div id="output" class="col-lg-12 container"></div>

现在它在悬停时看起来像这样“

《javascript – 如何在css悬停覆盖上显示字体真棒图标(如,视图)？》

我期待这样的事情：

《javascript – 如何在css悬停覆盖上显示字体真棒图标(如,视图)？》

最佳答案 您可以在主容器内创建子div

<div id="output" class="col-lg-12 container">
   <img src="SOMETHING"/>
   <div><i class="fa fa-heart"/><span class="counts">23</span></div>
</div>

在css

#output img {
    width:100%;
    height:100%;
}
#output > div{
    display:none;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 70px;
    height: 70px;
    z-index: 10;
}
#output > div:hover{
    display:block;
}
点赞