HTML : 이미지를 위해 a : 호버?

StackOverflow https://stackoverflow.com/questions/1030544

문제

을 위한 텍스트 링크, 나는 다음과 같습니다.

CSS :

a:link {color: #3366a9; text-decoration: none}
a:hover {border-bottom: 1px solid; color: black}

그러나 이것은 또한 Linkable에 검은 색 밑줄을 추가합니다 IMG 내가 원하지 않는다.

어떻게 제거합니까? border-bottom CSS를 사용하여 호버링 될 때 링크 가능한 IMG에?

다음을 시도했습니다.

a:hover img {border-bottom: 0px}

그러나 그것은 작동하지 않습니다

라이브 예 (왼쪽 상단 로고 위로 마우스를 가져 가십시오)

도움이 되었습니까?

해결책

이미지와 인라인을 떠 다니는 경우 이것은 작동하며 Steve의 답변에 필요한 이미지 링크 속성에 대한 수정이 필요하지 않습니다.

a:hover img {
border: none !important;
display: block;
}

다른 팁

a:hover img {border-bottom: 0px;}

그것은 트릭을 수행해야합니다.

이것이 최선의 솔루션인지 확실하지 않지만 작동합니다.

    a:link {color: #3366a9; text-decoration: none}
    a:hover {border-bottom: 1px solid black; }

    .aimg:link {color: #3366a9; text-decoration: none}      
    .aimg:hover { border-bottom: none; }

그런 다음 이미지가있는 앵커를 "AIMG"클래스로 설정하십시오.

<a class="aimg" href="Test.htm"><img src="images/myimage.gif" /></a>

이것은 나도 나에게도 효과가있었습니다. IE는 국경을 표시했지만 더 이상 그렇지 않습니다.

a img {/*whatever you need*/
border: none !important;
}
a img:hover{/*whatever you need*/
}

이 예제는 다음과 같습니다. https://perishablepress.com/css-lemove-link-underlines-borders-linked-images/

a[href$=jpg], a[href$=jpeg], a[href$=jpe], a[href$=png], a[href$=gif] {
    text-decoration: none;
    border: 0 none;
    }

이것이 바로 당신이 내가 생각하는 것입니다.
Firefox에서 완벽하게 작동하며 주어진 형식의 이미지가 포함 된 링크에서 모든 효과를 제거합니다.

jQuery를 사용하여 이미지가 포함 된 모든 태그에 "No-hover"클래스를 추가했습니다.

$('a > img').each(function() {
  $(this).parent().addClass('no-hover');
});

그리고 CSS에서 나는 이것을했다 :

a.no-hover:hover {
  border-bottom: 0px
}

jQuery가 너무 무겁다면 사용할 수 있습니다. 피코 퀴리. 단지 1k, .Each () 메소드 만 선택하면.

당신은 시도 했습니까? a img {border:none} ?

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top