링크 된 이미지에 CSS 'a'스타일이 적용되지 않습니다.

Question

웹 사이트의 링크에 글꼴 색상과 다른 색상이 적용되도록 지시되었습니다. 링크 된 이미지에 밑줄이 그어져 있다는 것을 제외하고는 모두 다음과 같이 border-bottom을 사용하여 아주 쉽게 보입니다.

JS를 사용하지 않고도 작업을 중단 할 수있는 방법이 있습니까?

a{ 
    color: #6A737B; 
    text-decoration: none; 
} 
a:hover{ 
    border-bottom: 1px solid #C60B46; 
    text-decoration: none; 
} 

예 - 이제 아래 이미지 위로 마우스를 내가 원하지 않는, 그것에 border-bottom CSS 스타일을 추가 -

<a title="Dyne Drewett" href="http://test.dynedrewett.com"> 
    <img class="attachment-full" width="202" height="78" alt="Dyne Drewett Solicitors" src="http://test.example.com/Website-Header.png"> 
</a> 

Answer 1

링크에 수업을 추가하는 것이 좋습니다.

해당 클래스를 제어 할 수없는 경우 6,

a.imglink:hover{ 
    border:0; 
} 

또는, 당신은 표시되지 않습니다 국경을 보장하기 위해 이미지에 부정적인 마진을 추가하는 시도 할 수 있습니다 :

a img{ 
    margin:0 0 -1px 0; 
} 

-1px을 기반으로하여 조정해야 할 수도 있습니다 그건 http://jsfiddle.net/QRXGe/이

Answer 2

a:hover img { 
border-bottom:none; 
} 

혹은을 ...

a:hover img.attachment-full { 
    border-bottom:none; 

} 

Answer 3

당신의 솔루션을 사용하면 랩 이미지 (또는 아무것도 국경을 제거해야 링크에 추가 클래스 이름을 추가 할 필요합니다 : 다른 규칙

다음은 부정적인 여백 솔루션을 보여줄 수있는 바이올린의). JavaScript 기술을 사용하기를 원하지 않는다면 "역 선택"을 정렬 할 방법이 없습니다.

JQuery와 기술은 다음과 같이 될 것이다 : 직계 후손으로 이미지가 모든 앵커 태그에서 "국경 - 하단의"스타일을 제거합니다

$('a > img').parent().css('border-bottom', 'none'); 

. 그러나 모든 페이지에이 스크립트가 필요할 것이므로이 스크립트로 모든 페이지가 구문 분석되므로 각 페이지에 약간의 오버 헤드가 추가됩니다.

그렇지 않으면, 당신은 같은 이러한 특정 링크 대상으로 CSS 클래스를 창조하는 HTML에 액세스 할 수있는 경우 :

a.img-link{ border-bottom:none; } 

과 같은 이미지 주위의 모든 링크에 적용 :

<a href="#" class="img-link"><img src="#" alt="" /></a> 

도움이 되었기를 바랍니다.

Answer 4

분명히 원하는 것은 동일한 마크 업 (<a>)의 내용에 따라 다른 동작입니다. 이 언어는 언어 프로그래밍 따라서 같은 if 같은 조건의 구조를 결여 아니므로

슬프게도, 순수 CSS이 작업을 수행 할 실제 방법이 없습니다.

그렇다고 해결책이 없다는 의미는 아닙니다.여기에 당신이 할 수있는 몇 가지이다.

1. 선언 (말) 당신의 HTML의 요소 (<a>는) 귀하의 경우, 클래스와 함께 (다르게 처리해야 하나 <a class="text"> 또는 <a class='image'>

2. .

   자바 스크립트 사용은 예를 들어 내용 등의 조건에 따라 의미 스타일 동적으로을 변경하는 경우에는 아마 같은 것 :

   function onLoad() { 
       for (var element in document.body) { 
        // look for links 
        // if this is a link: 
         // look for image inside link 
         // if there is one: 
          // remove the border 
       } 
   } 
   

을

Answer 5

같은 이미지 링크에 class을 사용하는 것이 작업을 수행하는 정적 방법 :

a.imglink:hover { 
    border-bottom: 0px solid; 
} 

당신이 가진 것 :

<a href='http://whatever.url.here/' class='imglink'> 
    <img src='img/image.png' alt='Alt text'> 
</a> 

그런 다음이 클래스에 CSS 스타일을 적용 다른 a:hover CSS 클래스 이후에이를 선언해야합니다.

Answer 6

이것을 달성하는 또 다른 방법은 간단히 링크 relative의 이미지를 만든 다음 테두리를 덮기 위해 바닥을 오프셋하는 것입니다. 5px는 http://jsfiddle.net/ECuwD/

a{ 
    color: #6A737B; 
    text-decoration: none; 
} 
a:hover{ 
    border-bottom: 1px solid #C60B46; 
    text-decoration: none; 
} 

a img { 
    position:relative; 
    bottom: -5px; 
} 

Answer 7

기술적으로, 당신이 그것을 포함 된 내용 요소를 기반으로 요소에 스타일을 설정할 수 없습니다 할 것으로 보인다. a 요소의 테두리를 내부에 img 요소가 있는지에 따라 다르게 설정할 수는 없습니다 (그리고이 부분을 다루는 것입니다). 클래스를 사용하는 것이 도움이되지만, 주석에서 이것은 문제가되지 않는 것 같습니다.

해결 방법이 있습니다. 각 이미지를 포함 요소의 맨 아래에 놓고 (기본값에 따라 기준선에 위치하지 말고) 한 픽셀 아래로 또는 테두리 폭이 무엇이든간에 아래로 이동하십시오. 이렇게하면 이미지에 투명도가없는 경우 하단 테두리가 이미지에 표시됩니다. CSS 코드 :

이 방법을 사용하면 모든 이미지의 위치가 약간 변경되므로주의하지 않으면 전체 레이아웃에 영향을 미칠 수 있습니다.