时间戳

首页 > 解决方案 > 如何进行悬停：在内容不推送下一个元素之后

html - 如何进行悬停：在内容不推送下一个元素之后

问题描述

我做了照片列表部分

<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;
}

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

标签： htmlcss

解决方案

试试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;
}

推荐阅读