2014-09-04 2 views
1

작동하지 않습니다, 다음과 같은 문제가 http://duncanmorley.com/ :텍스트가 강조되지 않습니다 : 호버은 다음 페이지에서

    문서
  • 사용자가 가진 객체 위로 가져갈 내에서 텍스트를 강조 할 수
  • 하나 CSS 파일에서 호버 효과가 적용되지 않습니다 (상단의 소셜 아이콘 참조) (클래스 = "fb") ​​

사용자가 요소와 상호 작용할 수없는 페이지 나는 CSS 파일 (이것이 볼 수있는 것)에 문제가 있음을 나타내는 내용이 없기 때문에 이것이 무엇인지 확신 할 수 없습니다.

이러한 문제는 한 가지 문제로 인한 것일 수 있습니다.

+0

당신이 그것을보고있는 브라우저/OS는 무엇입니까? 나는 간단히 Firefox/PC에서 그것을 보았고 텍스트 하이라이트 및 첫 번째 페이 스북 아이콘 위로 마우스를 가져 가면 잘 작동하는 것처럼 보였다. –

+0

이것은 Mac OS X에서 크롬입니다. –

+0

@AdamScott 답변을 수락 한 것으로 표시하십시오. – modiX

답변

2

text-indent: -99999999px;은 지역 호버 작업을 수정하기 때문에 여기에서 문제를 일으 킵니다. 페이스 북 공유 버튼

수정 (예)

fb 클래스에서 text-indent 스타일을 제거하고 된 텍스트 sr-only way 스타일을 할 수 <li class="fb">Facebook</li> 이제

<li class="fb"><span class="hide">Facebook</span></li>에 변경 :

.hide { 
    position: absolute; 
    width: 1px; 
    height: 1px; 
    padding: 0; 
    margin: -1px; 
    overflow: hidden; 
    clip: rect(0,0,0,0); 
    border: 0; 
} 
에게

끝 부분에서 동일한 효과를 얻으십시오. "Facebook"텍스트가 비주얼 용으로 숨겨집니다. hover 효과는 전체 요소에서 작동합니다.

+0

이것은 매우 이상합니다. 텍스트가 들여 쓰기가 너무 커서, 1) 내 웹 페이지의 텍스트를 선택하지 못하게하고 : 호버 기능이 작동하지 않게했습니다. –

1

이상하게도 텍스트 들여 쓰기가 너무 큽니다. 대신 -9999999px로 설정하면 Chrome이 더 좋아진 것 같습니다.

관련 문제