hover电影列表div.item元素时出现上下位移，该如何修复该样式问题？

问题原因 #

位移问题由两点共同导致：

• .item-description默认设置为display: none，hover时才切换为display: block，该元素本身有高度，显示时会撑高整个.item容器
• .item没有设置固定高度，高度随内部内容动态变化，导致相邻元素被挤压位移

修复方案（二选一即可） #

方案1：预留高度+淡入效果（推荐，交互更自然） #

修改对应CSS代码即可：

/* 原有.item选择器新增固定高度属性 */
.item {
    width: auto;
    margin-top: 20px;
    margin-bottom: 10px;
    margin-right: 40px;
    background-color: var(--body-bg);
    border-radius: 5px;
    border: 25px solid var(--body-bg);
    /* 新增：固定容器高度，数值可根据实际展示效果调整 */
    height: 480px;
}

/* 替换原有.item-description相关样式 */
.item-description {
    opacity: 0;
    visibility: hidden;
    /* 提前预留元素高度 */
    height: 22px;
    margin-top: 5px;
    /* 可选：加过渡动画更流畅 */
    transition: all 0.2s ease;
}

.item:hover .item-description {
    opacity: 1;
    visibility: visible;
}

方案2：描述栏悬浮不占文档流 #

如果不想提前给描述栏预留位置，可以让描述栏脱离普通文档流，悬浮在卡片下方，修改代码：

/* 给a标签加相对定位，作为描述栏的定位父级 */
.item a {
    color: unset;
    position: relative;
}

/* 替换原有.item-description相关样式 */
.item-description {
    display: block;
    position: absolute;
    /* 位置可根据需求调整，-25px对应item的25px边框，实现左右对齐 */
    left: -25px;
    right: -25px;
    bottom: -40px;
    padding: 8px 10px;
    border-radius: 0 0 15px 15px;
    background-color: #36414B;
    opacity: 0;
    visibility: hidden;
    z-index: 9;
    transition: all 0.2s ease;
}

.item:hover .item-description {
    opacity: 1;
    visibility: visible;
}

内容的提问来源于stack exchange，提问作者Freezy