注意：本代碼只是參考代碼，數(shù)據(jù)和后臺服務器進行的交互在本地操作，不過有些地方還是一樣的~可以作為參考。

新人~在最近寫代碼的時候，初次接觸了鼠標懸停的功能，經(jīng)過查閱實現(xiàn)了功能，來和大家分享一下。

話不多少，我做的是懸停隱藏和顯示這一功能，先上懸停功能代碼：

這里主要用到了 jquery.class選擇器 和 CSS:hover選擇器 ，獲取div標簽下標和li標簽下標進行比較，一一對應，才會將內(nèi)容顯示，否則將會隱藏。

下圖是對li標簽的設置：

隨后頁面代碼附上：

... ...中間一些不重要的地方就跳過~

一開始我想把li標簽和div標簽放入同意forEach中，但是發(fā)現(xiàn)這樣會產(chǎn)生沖突：在顯示一個已經(jīng)被隱藏的div時候，會將其他li標簽隱藏，導致無法觸發(fā)懸停事件或者不斷觸發(fā)懸停事件。

所以后面我將li標簽和div標簽分開循環(huán)，因為傳入?yún)?shù)一樣，所以有幾個li標簽，就會有幾個div標簽，當li標簽和div標簽下標一致時，鼠標懸停，就會顯示div隱藏的內(nèi)容。

完成圖不方便上傳，就不放了，不過最后在我完成后，有個無傷大雅的小問題，就是默認選中第一個后，必須觸發(fā)第一個的懸停功能，否則第一個永遠在選中狀態(tài)，當然，只要滑動鼠標的時候（1位置）滑一下就好

新人~如果有什么講的不對地方，敬請諒解。

總結(jié)

以上是生活随笔為你收集整理的关于鼠标悬停功能的实现的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。