CSS : 링크의 일부에서 밑줄 건너 뛰기

텍스트가 일반적으로 마우스를 가리킬 때 밑줄이 그어져 있지만 중간에이 밑줄이없는 섹션 (예 : 이미지)이있는 인접 링크가있을 수 있습니까? 이 작동하지 않습니다CSS : 링크의 일부에서 밑줄 건너 뛰기

<a href="#">one <span style="text-decoration:none;">two</span> <img src="img.png" style="border:0px; text-decoration:none;"> three</a>

출처

2010-06-04 Biggles

정말 이미지를 가지고 원한 무엇 링크에 "연결"HTML을 할 수 있는지 알고 싶습니다.

패딩 왼쪽
```
<a href="#" style="background:url('pic.png') no-repeat; background-position: left center; padding-left: 20px;">Link</a> 
```
이는 이미지를 중복되지 않도록 텍스트를 상쇄하기위한 것입니다 : 여기에 내가 생각 해낸 해결책이다.
배경 위치 에 맞게 이미지를 옮길 수 있습니다.
화상 이 모양을 조정할 패딩 바닥가 에 사용될 수 및 텍스트 패딩 정상보다 높을 경우.

이 기술은 또한 CSS 스프라이트 같은 사용할 수 있습니다 :

<span style="background:url('sprites.png') no-repeat; background-position: -16px -16px; padding-left: 32px;"></span>

희망 :

<a href="#" style="background:url('sprites.png') no-repeat; background-position: -16px -16px; padding-left: 32px;">Link</a>

내가 대신 일반 인라인 이미지의 CSS 스프라이트를 사용하는 유사한 기술을 사용 이것은 누군가에게 도움이된다

출처

2010-07-09 12:57:19 Biggles

스팬에 의 텍스트를 래핑 한 다음이 배경 스프라이트 기법을 사용하는 CSS 클래스를 첨부하면 정말 잘 작동합니다. –

<a href="#" style="text-decoration:none;"> 
    <span style="text-decoration:underline;">one</span> 
    two 
    <img src="img.png" style="border:0px; text-decoration:none;"> three 
</a>

나는 단지 다음과 같이 자바 스크립트를 사용하여 수있을 수 있다고 생각합니다.

LOOK 다음 예

<html> 
<head></head> 
    <style> 
    a{ 
     text-decoration:none; 
    } 

    a:hover 
    { 
     text-decoration:none; 
    } 

    .sample 
    { 
     text-decoration:underline; 
    } 

    .sample_none 
    { 
     text-decoration:none; 
    } 
    </style> 
    <script type="text/javascript"> 
     function show_underline(){ 
     document.getElementById('sample').className= 'sample'; 
     } 

     function hide_underline(){ 
     document.getElementById('sample').className= 'sample_none'; 
     } 
    </script> 
    <a href="#" onmouseover="show_underline();" onmouseout="hide_underline();"> <span id="sample" class="sample_none">two</span> 
    <img src="img.png" style="border:0px;"> three 
    </a> 


</body> 
</html>

P.S. 이 호버에 밑줄을받지 않고는, CSS 만

출처

2010-06-04 07:40:02 Salil

이것은 밑줄을 항상 켜야한다. 호버링을 처리하기 위해 특수 클래스를 만들면 연속 링크가 끊어집니다. – Biggles

코드를 작성한 후 붙여 넣으십시오. 나는 당신이 공중 선회를 어떻게 처리하는지 알고 싶습니다. neways 정말 좋은 질문 :) – Salil

Salil : 추가 테스트에서 나는 그것이 내 문제를 해결하지 못했다는 것을 발견했다. – Biggles

a, a:hover { text-decoration: underline; } 
a img, a:hover img { text-decoration: none !important; }

출처

2010-06-04 08:28:25 eyelidlessness

내가 3 번에 밑줄을 긋고 싶을 때 나는 어떻게 할 수 있습니까? – Salil

스타일 : a, a : hover {text-decoration : 밑줄; } a img, a : 마우스 오버 img, span.two {텍스트 장식 : 없음! 중요; border : 0; } 및 마크 업 : one two three – eyelidlessness

이러한 기능을 사용할 수 없습니다. 이미지에는 여전히 밑줄이 그어져 있습니다. – Biggles

CSS : 링크의 일부에서 밑줄 건너 뛰기

답변

관련 문제