使用LESS更改懸停上的文本不起作用

我試圖在使用LESS懸停時更改我的導航菜單中的文本。我跟着this solution，但它不適合我，我不明白爲什麼。使用LESS更改懸停上的文本不起作用

這裏是我的html：

<nav class="sideNav"> 
    <ul> 
     <li><a href=""><span>one</span></a></li> 
     <li><a href=""><span>2</span></a></li> 
     <li><a href=""><span>3</span></a></li> 
     <li><a href=""><span>4</span></a></li> 
     <li><a href=""><span>5</span></a></li> 
    </ul> 
</nav>

和我LESS：

li:nth-child(2) span{ 
     position: relative; 
     content: '2'; 
    } 
    li:nth-child(2):hover li:nth-child(2) span{ 
     display: none; 
    } 
    li:nth-child(2):hover li:nth-child(2):after{ 
     content: 'ADD'; 
    }

任何幫助，將不勝感激，謝謝。

來源

2015-09-15 Jake

你不能選擇在CSS中，使用第二個元素的第1個要素'content'只能用僞元素的作品。順便說一句你的代碼是香草CSS，而不是。我建議你尋找JS解決方案。 –

那也不是很少？這是CSS。 – Aaron

這是一個錯字。固定。 – Jake

你應該試試這個。

li:nth-child(2):hover span { 
 
    text-indent: -9999px; 
 
} 
 
li:nth-child(2):hover a:after { 
 
    content: 'ADD'; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
} 
 
.sideNav a, 
 
.sideNav span { 
 
    display: block; 
 
    position: relative; 
 
}

<nav class="sideNav"> 
 
    <ul> 
 
    <li><a href=""><span>one</span></a> 
 
    </li> 
 
    <li><a href=""><span>2</span></a> 
 
    </li> 
 
    <li><a href=""><span>3</span></a> 
 
    </li> 
 
    <li><a href=""><span>4</span></a> 
 
    </li> 
 
    <li><a href=""><span>5</span></a> 
 
    </li> 
 
    </ul> 
 
</nav>

來源

2015-09-15 16:08:23 Aaron

謝謝。這工作。 – Jake

嘿，我說得太快了。當文本根據需要更改時，鏈接在執行後停止工作。 – Jake

Ive更新了我的答案...抱歉沒有檢查錨點:) – Aaron

對方回答仍然沒有解決我的鏈接。這固定它。

HTML

<li class="hoverable"> 
       <span class="normal"><a href="">2</a></span><span class="hover"><a href="">two</a></span> 
      </li>

CSS

來源

2015-09-16 01:19:45 Jake

使用LESS更改懸停上的文本不起作用

回答

相關問題