html - 悬停跨度显示在图像下方

Question

所以我有一个人们可以赚取的“东西”列表，每个东西的信息都是这样显示的。

<--div 1 a.img--> <--div 2 a.img--> <--div 3 a.img-->

<--div 4 a.img--> <--div 5 a.img--> <--div 6 a.img-->

当我将鼠标悬停在 div 1 中的 a.img 上时，显示的范围位于 div 4 中的 img 下方。

这是我的CSS

a {
    cursor: default;
    position: relative;
    text-decoration: none;
    z-index: 1;
}

a:hover span {
    display:block;
    position:absolute;
    background:#ffffff;
    border:1px solid #cccccc;
    color:#6c6c6c;
    max-width: 210px;
    padding:5px;
    z-index:2;
}

任何帮助都会很棒，谢谢

Answer 1

您应该将 display: block 赋给 a 标签。