有谁知道如何使这个选项表现得像锚标签？答案

【问题标题】：Does anyone know how to make this option behave like Anchor Tag?有谁知道如何使这个选项表现得像锚标签？
【发布时间】：2014-12-01 09:40:05
【问题描述】：

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

此图像是引导程序中的字形图标和一段文本的组合，但由于某种原因，每当我突出显示它时，只有图标被突出显示，而不是文本。

在 NG-Repeat 中使用 AngularJS 的代码：

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

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

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

问题说明：

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

【问题讨论】：

【解决方案1】：

这是因为默认情况下，没有href 属性的<a> 标签在您将鼠标悬停在它们上方时不会有手形光标。

有两种修复方法：

添加一条显示为cursor: pointer; 的CSS 规则。
将href="#" 属性添加到<a> 标记。如果您使用 ng-click 处理程序，请确保调用 $event.preventDefault() 以防止浏览器尝试转到 # 链接。

【讨论】：

【解决方案2】：

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

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

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

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

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

【讨论】：