有谁知道如何让这个选项像Anchor Tag一样？

Question

这是一个非常简单的问题，但我有点像初学者。

此图片是来自bootstrap的glyphicon和一段文字的组合，但出于某种原因，每当我突出显示它时，只有图标会突出显示而不是文本。

在NG重复中使用AngularJS的代码：

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

我希望这个行为就像一个普通的锚标记链接，整个部分在悬停时突出显示，鼠标变成手形图标。

我认为这是一个HTML / CSS问题。

---

澄清问题：

出现手形图标但仅突出显示图标，而不是文本。有没有办法让整条线突出显示？

Answer 1

这是因为默认<a>标签没有href属性，当您将鼠标悬停在它们上时，它们将没有手形光标。

有两种方法可以解决它：

1. 添加一条说明cursor: pointer;。
的CSS规则
2. 在href="#"标记中添加<a>属性。如果您使用的是ng-click处理程序，请致电$event.preventDefault()以阻止浏览器尝试转到#链接。

Answer 2

在花了几个小时试图找出答案之后，我发现了我的错误。

通过在单个标签中将文本旁边的图标，每行被视为2个单独的元素，因此只在悬停时突出显示左侧的图标。

以下代码解决了我的问题：

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

通过将图标和文本包装在锚标记中，现在它将被视为单个元素，因此将整个行突出显示为1个锚标记。