Question

我在锚标记内有一个图像。我希望图像有一个厚厚的灰色边框，当我用鼠标悬停它时，图像应该被一个薄的黑色边框包围，不能完全覆盖灰色边框。我用两个边框实现了这个想法：图像有边框，锚有另一个边框。在我的理解应该工作正常，但它没有：在图像的底部有一种填充边距。我对这些款式做错了吗？这是我使用的代码，只需将其复制并粘贴即可自行查看：

<!DOCTYPE html>
<html>
    <head>
        <style>
            a img {border:1px #cccccc solid}
            a:hover img {border:1px #000000 solid}
            a {float:left;border:2px #cccccc solid}
        </style>
    </head>
    <body>
        <a href=""><img src="https://sites.google.com/site/davikokar/lavaligiafelice/puglia2012/thumbs/IMG_7861_2_3.jpg"/></a>
    </body>
</html>

Answer 1

将display：block添加到img

http://jsfiddle.net/renekoch/MDy3n/

Answer 2

尝试删除此行

a {float:left;border:2px #cccccc solid}

如果您的目的是仅在悬停时突出显示图像并且工作正常

http://jsfiddle.net/LpPVq/

Answer 3

我不是CSS的秘诀，但似乎你在CSS第3行重新定义a

无法摆脱一些填充

3 个答案: