Html 在悬停时添加底部边框，仅限 CSS
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15208708/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Adding a bottom border on hover, CSS only
提问by Chaddly
How can I make a line appear only on the bottom of a linked image when hovered?
悬停时，如何使一条线仅出现在链接图像的底部？
I can get an inner border to display on hover, but I only want border-bottom to display.
我可以在悬停时显示一个内边框，但我只想显示 border-bottom。
Here is what I have so far, even though it is with the outline property instead of border:
这是我到目前为止所拥有的，即使它是带有轮廓属性而不是边框：
#links a img, #links a{ border: none; float: left; }
#links a{ margin: 3px; }
#links a:hover{ outline: 3px solid black; }
Not hovered:
未悬停：
Hovered:
悬停：
回答by Gemtastic
One option to get the same result without affecting the size of your link (borders append to the outside of the element) is to use an inset box-shadow.
在不影响链接大小（边框附加到元素的外部）的情况下获得相同结果的一种选择是使用插入框阴影。
Which in your example would be to change your a:hoverto the following:
在您的示例中，您将更a:hover改为以下内容：
#links a:hover {
box-shadow: inset 0 -10px 0 0 cyan;
}
You can see the fiddle here: https://jsfiddle.net/kLLxkdw4/
你可以在这里看到小提琴：https: //jsfiddle.net/kLLxkdw4/
回答by David says reinstate Monica
Just assign the border-bottomproperty on :hover:
只需将border-bottom属性分配给:hover：
#links a:hover{
border-bottom: 3px solid #00f; /* or whatever colour you'd prefer */
outline: 3px solid black;
}
If the phrase 'anchored image' should be taken to mean the imgis withinthe aelement, then I'd suggest:
如果短语“锚定图像”应该被理解为在img为内部的a元素，那么我建议：
#links a:hover img {
border-bottom: 3px solid #00f; /* or whatever you'd prefer */
}
回答by AllJs
Try this code I just wrote specially for you. This solution answers your question about adding a border-bottomon :hover. It even goes far beyond that and changes the backgroundof the whole #linkelement on :hoveras well with CSS transitions.
试试我专门为你写的这段代码。此解决方案回答了您关于添加border-bottomon 的问题:hover。它甚至远远超出了这一点，改变了background整个的#link元素上:hover也有CSS transitions。
HTML Markup
HTML 标记
<div id="links">
<a href="#">Example Link</a>
</div>
CSS Effets & Transitions
CSS 效果和过渡
#links a{
color:#fafafa;
text-decoration:none;
background-color:#8b0000;
padding:15px;
border-radius:5px;
font-size:1.3em;
transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
}
#links a:hover{
background-color:#fff;
color:#002f5b;
border-bottom:5px solid #002f5b;
}
回答by Nike Web designer
TRY THIS
#links a:hover{ border-bottom: inset 8px #000; }
试试这个#links a:hover{ border-bottom: inset 8px #000; }
回答by Farzin Kanzi
Put your image in a div and add a mask div.
将您的图像放在一个 div 中并添加一个蒙版 div。
#mask {
position: absolute;
z-index: 2;
box-sizing: border-box;
height: 100%;
width: 100%;
top: 0;
left: 0;
border-bottom: 3px solid transparent;
}
#mask:hover {
border-bottom: 3px solid cyan;
}
#outerDiv {
display: inline-block;
position: relative;
}
img {
display: block;
}<div id='outerDiv'>
<img src="https://www.gravatar.com/avatar/087039a00851e75ff483470e3aba89c9?s=32&d=identicon&r=PG" />
<div id='mask'></div>
</div>回答by TheYaXxE
If you want it to work with an imginside your a, you can use a pseudo-element on the anchor, and then apply the border to that. Also. To avoid the border from appending to the outside of the link, you should use an inset box-shadowinstead:
如果您希望它与img您的内部一起a使用，则可以pseudo在锚点上使用 -元素，然后将边框应用于该元素。还。为避免将边框附加到链接的外部，您应该使用 insetbox-shadow代替：
a {
display: inline-block;
position: relative;
}
a:hover:before {
content: '';
width: 100%;
height: 100%;
position: absolute;
left: 0;
bottom: 0;
box-shadow: inset 0 -20px 0 #11c0e5;
}
a img {
display: block;
}<a href="#">
<img src="http://oi65.tinypic.com/241jlzk.jpg"/>
</a>