鼠标悬停，只能使文字加粗，下划线应该是正常的

代码：

<div class="link_my"> <a href="a.php">my link</a></div>

CSS：鼠标悬停

.link_my a:hover{ 

font-weight:bold; 
text-decoration:underline; 

}

，文字的字体与ubderline沿变为粗体。但我希望下划线是正常的（而不是粗体）。

如何做到这一点？

来源

2012-07-13 Istiaque Ahmed

这将为你工作Istiaque。 JS FIDDLE LINK：http://jsfiddle.net/39TtM/

HTML：

<a href="#" class="link"> 
    <span> 
     my link 
    </span> 
</a>

CSS：

.link span{ 
    color:blue; 
    font-size:30px; 
} 

.link:hover span{ 
    font-weight:bold; 
} 

.link:hover{ 
    text-decoration:underline; 
}

来源

2012-07-13 14:29:42 AdityaSaxena

你可以使用底部边框，而不是

.link_my a:hover{ 

font-weight:bold; 
text-decoration:none; 
border-bottom:1px solid #ccc; 

}

感谢约翰

来源

2012-07-13 13:47:47 JohnC

要改善来自大卫身份证的答案，建议在物品上添加一个透明边框并更改悬停时的颜色http://jsfiddle.net/VA23f/ – JohnC 2012-07-13 13:53:41

抱歉粘贴了错误的链接http://jsfiddle.net/v7G3v/1/ – JohnC 2012-07-13 14:00:56

为什么要添加透明边框？ – 2012-07-14 12:21:58

下划线是文本的一部分，他们不不同的元素/件。解决此

一种方法是使用border而不是下划线：

.link_my a { 
    text-decoration: none; 
    border-bottom: 1px solid #000; 
} 
.link_my a:hover{ 
    font-weight:bold; 
}

JS Fiddle demo。

来源

2012-07-13 13:48:20

边框和下划线 - 做那些占据完全相同的位置？ – 2012-07-13 13:51:30

否;在文本下方会出现一个“下划线”，但在文本下方的前导空间（或下拉空间？）的“上方”（位于上边缘）;而边框位于元素的底部边缘。他们*相似*，但不一样。 – 2012-07-13 13:53:16

在使用行高（也许显示：块太）的情况下，阿迪亚的解决方案可能是优选> else（当使用border-bottom时）下划线会出现在块元素下面，而不是根据需要置于文本下面。

来源

2013-06-21 15:15:00 sasha

请澄清David的答案之外的意思。 – 2013-06-23 07:08:24

澄清和超越（你是对的，艾哈迈德）>为了得到这里想要的视觉输出，在两种情况下（！）都需要添加一个额外的元素，要么将边框底部直接保留在文本之下（和而不是包含它的可见元素），或者将下划线样式与粗体样式分开。 >>>所以aditya的解决方案可能会更好，因为它更接近于设计逻辑 – sasha 2013-06-24 07:39:08

为什么这是一个答案，而不是评论？ – 2013-06-27 11:29:06

鼠标悬停，只能使文字加粗，下划线应该是正常的

回答

相关问题