Question

我做了照片列表部分

<div id="main_post_photo">
          <%
          for(var q=0;q<resolve.length;q++){
              if(resolve[q].images.length>=1){%>
          <a href='/post/<%= resolve[q]._id%>'><img src="../uploads/<%= resolve[q].images[0].images %>" width=150px height=150px></a>
          <%}}%>
</div>

将鼠标悬停在图像上时，创建rgba（0,0,0,0.3）黑色封面效果

但是当发生悬停时，标签宽度是以前的两倍

CSS：

#main_post_photo>a:hover:after{
    content: "";
    left:-150px;
    width: 150px;
    height: 150px;
    background: rgba(0,0,0,0.3);
    position: relative;
    display: inline-block;
}

如何修复它们而不要推送下一个内容？

Answer 1

尝试position: absolute;这样，元素的位置不会影响其他内容。但是您可能需要调整顶部。

#main_post_photo>a:hover:after{
    content: "";
    left:-150px;
    width: 150px;
    height: 150px;
    background: rgba(0,0,0,0.3);
    position: absolute;
    display: inline-block;
}

如何进行悬停：在内容不压入下一个元素之后

1 个答案: