0

我有一个锚标签内的图像。我希望图像有一个粗灰色边框，当我用鼠标悬停它时，图像应该被一个细黑色边框包围，它不会完全覆盖灰色边框。我用两个边框实现了这个想法：图像有一个边框，锚点有另一个边框。以我的理解应该可以正常工作，但事实并非如此：图像底部有一种填充边距。我在样式上做错了吗？下面是我使用的代码，复制粘贴自己看吧：

<!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>
4

3 回答 3

1

将 display:block 添加到 img

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

于 2012-10-15T07:51:40.927 回答
0

尝试删除此行

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

如果您的意图是仅在悬停时突出显示图像并且效果很好

http://jsfiddle.net/LpPVq/

于 2012-10-15T07:49:35.543 回答
0

我不是 CSS 方面的专家，但您似乎正在重新定义aCSS 第 3 行

于 2012-10-15T07:49:47.690 回答