Does anyone know how to make this option behave like Anchor Tag?

Question

This is a very simple question, but I am a bit of a beginner.

This image is a combination of a glyphicon from bootstrap and a piece of text, but for some reason whenever I highlight over it, only the icon gets highlighted and not the text.

Code Using AngularJS in a NG-Repeat:

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

I would like this to behave just like a normal anchor tag link, where the entire piece gets highlighted on hover and the mouse becomes a hand icon.

I believe that this is a HTML/CSS problem.

---

Clarification of problem:

The hand icon appears but only the icon is highlighted, not the text. Is there a way to allow the entire line to be highlighted?

Answer 1

This is because by default <a> tags without a href attribute will not have a hand cursor when you hover over them.

There are two ways to fix it:

1. Add a CSS rule that says cursor: pointer;.
2. Add a href="#" attribute to the <a> tag. Make sure if you use an ng-click handler, you call $event.preventDefault() to prevent the browser from trying to go to the # link.

Answer 2

After spending hours of trying to figure out the answer, I have found my mistake.

By having the icon next to the text in a single tag, each line is being treated as 2 separate elements and therefore only highlights the icon on the left upon hover.

The following code solved my problem:

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

By wrapping both the icon and the text in an anchor tag, now it will be treated as a single element and therefore, highlights the entire row as 1 anchor tag.