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

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

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

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

下圖是對li標簽的設置：

隨后頁面代碼附上：

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

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

所以后面我將li標簽和div標簽分開循環，因為傳入參數一樣，所以有幾個li標簽，就會有幾個div標簽，當li標簽和div標簽下標一致時，鼠標懸停，就會顯示div隱藏的內容。

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

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。