간단한 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 바이올린 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;
}
대신
.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;
}
테두리와 밑줄 - 정확히 같은 위치를 차지합니까? –
아니요; 텍스트 아래에 '밑줄'이 표시되지만 텍스트 아래의 선행 공백 (또는 공백 문자?)의 '위'(위 가장자리에 있음) 테두리는 요소의 아래쪽 가장자리에 있습니다. 그것들은 * 비슷합니다. 그러나 같은 것은 아닙니다. –
, 디트의 용액이 바람직 할 수도 > else (border-bottom을 사용하는 경우) 밑줄은 원하는 텍스트 아래가 아닌 block-element 아래에 나타납니다.
David의 답변을 넘어서 무엇이 의미하는지 명확히하십시오. –
> 명확하고 명확하게 (당신이 맞다, 아아)> 시각적 결과물을 얻으려면 두 경우 모두 (!) 추가 요소를 추가하거나 텍스트 아래에 테두리 아래를 유지해야합니다. 눈에 보이지 않는 요소에 포함되어 있음), 또는 밑줄 스타일과 굵은 스타일을 구분할 수 있습니다. >>> 그래서 디자인 로직에 가깝기 때문에 aditya의 솔루션이 더 좋을 수도 있습니다. – sasha
왜 대답이 아닌 주석입니까? –
david ID의 답변을 향상 시키려면 항목에 투명 테두리를 추가하고 호버에서 색상을 변경하는 것이 좋습니다. http://jsfiddle.net/VA23f/ – JohnC
죄송합니다. 잘못된 링크를 붙여 넣습니다. http://jsfiddle.net/v7G3v/1/ – JohnC
투명 테두리를 추가하는 이유는 무엇입니까? –