CSS : img 테두리 및 텍스트 장식

링크 호버에 텍스트 장식을 사용하는 동안 IE 이미지 테두리 문제를 해결하려고합니다. 국경 문제는 수정되었지만 장식은 사라졌습니다.CSS : img 테두리 및 텍스트 장식

<a href="home.php" class="menu-links"> 
<div class="menu-home">Home</div> 
<img class="menu-home-logo" src="images/home.png" width="32" height="32"> 
</a>

CSS : 당신이 포함

.menu-links { 
    color:#000; 
    text-decoration:none; 
} 
.menu-links:hover { 
    text-decoration:underline; 
} 
.menu-links img {border: none; }

출처

2012-08-09 xperator

이미지에 밑줄을 넣으시겠습니까? 위 코드를 사용하고 링크를 가리키면 "집"에 밑줄이 그어집니다. – Jason

@ Jason 아니요 마우스가 링크를 가리키면 텍스트에 밑줄을 표시하고 싶습니다. IE에서 테두리가 img 주위에 있기 때문에 테두리를 제거하고 싶습니다. – xperator

코드는 인터넷 익스플로러와 파이어 폭스에서 제대로 작동합니다. 마우스를 가져 가면 이미지에 테두리가 생기며 밑줄이 그어집니다. 당신은 텍스트뿐만 아니라 밑줄이 이미지를 원하는 경우, 당신은 호버의 이미지에 border-bottom보다는 text-decoration을 추가해야합니다 :

<html> 
    <head> 
     <title>Test</title> 
     <style type="text/css"> 
      .menu-links { color:#000; text-decoration:none; } 
      .menu-links:hover { text-decoration:underline; } 
      .menu-links img { border: none; } 
      .menu-links:hover img { border-bottom: 1px solid #000; } 
     </style> 
    </head> 

    <body> 
     <a href="home.php" class="menu-links"> 
      <div class="menu-home">Home</div> 
      <img class="menu-home-logo" src="images/home.png" width="32" height="32"> 
     </a> 
    </body> 
</html>

을 맞아 표시되지 않을거야, 당신은 아마 몇 가지있어 위에 게시 한 스타일을 방해하는 다른 CSS. Firebug와 같은 디버거를 사용하여 컨트롤을 분석하고 밑줄이 표시되지 않도록하십시오.

출처

2012-08-09 17:18:17 Jason

그래, 보이지 않아 ... 나는 정말로 무슨 일이 일어나고 있는지 이해하지 못한다. DreamWeaver에서 작동하지만 파일을 업로드하고 브라우저에서 확인하지는 않습니다. 변경된 소스를 볼 수 있으므로 캐시 문제가 있어서는 안됩니다. 혼란 스러웠습니다 – xperator

전체 페이지를 공유 할 방법이 있습니까? – Jason

페이지 자체를 공유 할 수는 없지만 전체 CSS 파일은 다음과 같습니다. http://pastebin.com/nGerzidF 나는 밑줄과 충돌하는 것이 맞다고 생각합니다. 내 CSS 파일로 코드를 시도했지만 작동하지 않습니다. 내 CSS에 무언가 잘못된 것 같습니다 – xperator

CSS : img 테두리 및 텍스트 장식

답변

관련 문제