Question

我正试图让鼠标悬停在视频链接上方显示“播放”图标。为此，我使用：before伪元素在链接上添加►字符。我的问题是所有链接都有相对定位，虽然我的：在元素的宽度/高度为0之前，它似乎正在移动链接。

在样式中添加“display：inline-block;”为大多数浏览器解决了这个问题，但我仍然遇到IE / Firefox的问题。

HTML

<li class="videoLinks">
    <a>
        <img src="01-poster.png">
    </a>
    <a>
        <img src="02-poster.png">
    </a><br><br>
    <a >
        <img src="03-poster.png">
    </a></li>

CSS

.videoLinks a{
    display:inline-block;
}
.videoLinks a img{
    z-index:0;
    opacity:0.7;
    border:1px solid #808080;
    margin-left:4px;
    box-shadow:2px 3px 5px rgba(0,0,0,0.2);
}
.videoLinks a img:hover{
    opacity:1;
    border:1px solid #ff6600;
}
    .videoLinks a:hover:before{
        z-index:5;
        position:relative; top:-12px; left:30px;
        display:inline-block; width:0px; height:0px;
        margin:0; padding:0; border:0;
        content:"\25BA";  /** "►" **/
        color:rgba(255,96,0,0.8); font-size:80px;
        text-shadow:    -1px -1px 0 rgba(0,0,0,0.2),
                1px -1px 0 rgba(0,0,0,0.2),
                -1px  1px 0 rgba(0,0,0,0.2),
                1px  1px 0 rgba(0,0,0,0.2);
        pointer-events:none;
    }

提前致谢

Answer 1

：默认情况下，元素以内联方式显示之前。因为您无法设置内联文件的宽度和高度，所以您需要显示：内联块或阻止这些元素。只是为了解释为什么这有效...

但请问为什么你不使用position：absolute作为：before-element？所以它不会对图像产生任何影响，你可以将它放在链接上。 display：inline-block包含播放按钮和图像之间的虚拟空间，这就是移动图像的方式。

具有0宽度和高度的DIV影响其他元素的相对位置

1 个答案: