有誰知道如何使這個選項的行爲像錨標籤？

Question

這是一個非常簡單的問題，但我是一個初學者。

此圖像是bootstrap和一段文本的圖形的組合，但由於某些原因，只要突出顯示它，只會突出顯示圖標而不顯示文本。

代碼在NG-重複使用AngularJS：

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

我想這個表現就像一個正常的錨標記鏈接，在整片被懸停和鼠標高亮成爲手形圖標。

我相信這是一個HTML/CSS問題。

---

澄清的問題：

手圖標出現，但只有圖標高亮顯示，而不是文字。有沒有辦法讓整條線突出顯示？

Answer 1

這是因爲默認<a>沒有href屬性的標籤在您將鼠標懸停在它們上方時沒有手形光標。

有兩種方法來解決這個問題：

1. 添加CSS規則說cursor: pointer;。
2. 將href="#"屬性添加到<a>標籤。確保如果您使用ng-click處理程序，請致電$event.preventDefault()以防止瀏覽器嘗試轉至#鏈接。

Answer 2

花了幾個小時試圖找出答案後，我發現我的錯誤。

通過在單個標籤中的文本旁邊顯示圖標，每行都被視爲2個單獨的元素，因此只在懸停時突出顯示左側的圖標。

下面的代碼解決了我的問題：

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

通過包裝同時設置了圖標和錨標記文本，現在它會被當作一個單一的元素，因此，突出了整個行爲1個錨標籤。