[英]mouse hover, make only the text bold , the underline should be normal
简单的HTML和CSS。
码:
<div class="link_my"> <a href="a.php">my link</a></div>
CSS:
.link_my a:hover{
font-weight:bold;
text-decoration:underline;
}
鼠标悬停时,文本字体与ubderline一起变为粗体。 但我希望下划线是正常的(不是粗体)。
怎么做 ?
这对你有用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;
}
你可以使用border-bottom
.link_my a:hover{
font-weight:bold;
text-decoration:none;
border-bottom:1px solid #ccc;
}
谢谢约翰
下划线是文本的一部分,它们不是不同的元素/部分。
解决这个问题的一种方法是使用border
而不是下划线:
.link_my a {
text-decoration: none;
border-bottom: 1px solid #000;
}
.link_my a:hover{
font-weight:bold;
}
JS小提琴演示 。
在使用行高 (也可能是显示:块)的情况下,Aditya的解决方案可能更可取> else(当使用border-bottom时)下划线将出现在block-element下而不是根据需要出现在text下。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.