누구나이 옵션을 앵커 태그처럼 작동시키는 방법을 알고 있습니까?

Question

이것은 매우 간단한 질문이지만 초보자입니다.

이 이미지는 부트 스트랩의 글리프콘과 텍스트의 조합입니다. 그러나 어떤 이유로 그 위에 강조 표시 될 때마다 아이콘 만 강조 표시되고 텍스트는 표시되지 않습니다.

코드 NG-반복에 AngularJS와 사용 :

<a class="icon-user"> {{name}}</a> 

나는이 단지 전체 조각을 가져가 마우스에 강조 표시됩니다 정상 앵커 태그 링크처럼 행동하고 싶습니다 손 아이콘이됩니다.

나는 이것이 HTML/CSS 문제라고 생각합니다. 문제의

---

명확화 :

손 아이콘이 나타납니다하지만 아이콘이없는 텍스트, 강조 표시됩니다. 전체 행을 강조 표시 할 수있는 방법이 있습니까?

Answer 1

기본적으로 <a> 태그가없는 href 태그가 있으면 커서를 가져 가면 손 모양 커서가 표시되지 않기 때문입니다.

1. 이 cursor: pointer;을 말한다 CSS 규칙을 추가합니다 :

   는 문제를 해결하는 방법은 두 가지가 있습니다.

2. <a> 태그에 href="#" 속성을 추가하십시오. ng-click 처리기를 사용하는 경우 $event.preventDefault()을 호출하여 브라우저가 # 링크로 이동하지 못하도록하십시오.

Answer 2

답변을 찾는 데 많은 시간을 보낸 후에 내 실수를 발견했습니다.

단일 태그의 텍스트 옆에 아이콘이 표시되므로 각 줄은 2 개의 개별 요소로 취급되므로 마우스를 올리면 왼쪽의 아이콘 만 강조 표시됩니다. 다음 코드 내 문제 해결

: 아이콘 및 앵커 태그의 텍스트를 모두 감싸는

<a href="#"> 
     <i class="icon-eye-open"></i> 
     {{name}} 
    </a> 

해주기가 단일 요소로 취급되므로되며 1 앵커 전체 행을 강조 꼬리표.