CSS:当我的鼠标悬停在链接上时，如何将链接的 "border-top"变成图像

Question

我想知道是否有办法将 border-top 和 border-bottom 更改为我自己制作的特定边框。这是一张图片，我希望在用户将鼠标悬停在链接上时显示它。

这可能吗？或者我是否必须将我的链接制作成图像，然后将图像更改为另一个带边框的链接图像。 (这似乎是一个很长的路要走。我希望有一个更简单的方法)

这是我的代码。一切正常。我只想用自己制作的图像边框替换实心边框。

CSS:

.home   {
font: bold 15px;
    text-align:center;
height:30px;
width: 223px;
    background-color: #d0d1cf;
    color: #000000;
    padding: 2px 2px 2px 2px;
position:absolute;
left:80px;
top:200px;
}

.home:hover {
        background-color:#b2b4b0;
        border-top:solid 1px #ffffff;
        border-bottom:solid 1px #ffffff;
        }

HTML:

    <div class="home">
    <a href="home.html">Home</a>
</div>

Answer 1

您可以在悬停时使用背景图片，它会包含您想要显示的两个边框。

a {
border-top:5px;
border-bottom:5px;
height:50px;
}
a:hover {
border:none;
background-image:url(image.jpg);
height:60px;/*normal height + missing borders*/
}

您需要做的就是创建一个图像，顶部边框在顶部，底部边框在底部，添加了元素的高度 + 两个边框的高度。

另外，一旦你在悬停时移除了边框，你需要调整元素的高度，所以它不会因为缺少边框而改变它的高度。

真实高度 = height prop + borders + padding。

我不会为此使用边框图像，因为它尚未得到广泛支持。