如何使邊框跟隨網頁頂部導航欄中的cursor

Question

我有個問題。 我正在制作一個網頁，我知道頂部導航欄將跟隨我的 cursor。 基本上，我希望頂部欄中每個鏈接周圍的邊框會跟隨我移動鼠標 cursor 的位置。 我從 iOS（特別是來自照片）那里得到了這個想法，它有很多很酷的功能。 知道如何做到這一點嗎？

我還為您提供了一個指向我發布視頻的谷歌驅動器的鏈接，因為據我所知，您目前無法直接在此處上傳視頻。

https://drive.google.com/file/d/17nqIWUtp0Smr4I8RzWJDahjYioLxtwdQ/view?usp=sharing

任何幫助將不勝感激。

Answer 1

對不起，不是很適應。 現在想不出更好的辦法：

 body { font-family: 'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 13px; background: #000; padding:20px; margin:0; } div { background: #333; border-radius: 30px; overflow:hidden; padding:0 5px; position: relative; font-size:0; display:inline-block }.highlight { display: block; width: 100%; background: #ccc; position: absolute; height: calc(100% - 10px); top: calc(50%); transform: translateY(-50%); left: -100%; border-radius: 30px; transition: left.2s ease, width.2s ease; pointer-events: none; margin-left: 6px; width:0; opacity: 0; } a { display: inline-block; font-size: 12px; text-decoration: none; color: #FFF; padding: 10px; margin: 4px 0; z-index: 999; position:relative; transition: color 0.2s; } a:hover { color: #000 } a:hover ~.highlight { opacity: 1; } a:nth-of-type(1):hover ~.highlight { left: 0px; width: 39px; } a:nth-of-type(2):hover ~.highlight { width: 42px; left: 50px; } a:nth-of-type(3):hover ~.highlight { left: 104px; width: 35px; } a:nth-of-type(4):hover ~.highlight { left: 152px; width: 59px; }

 <div> <a href="#">Years</a> <a href="#">Month</a> <a href="#">Days</a> <a href="#">All photos</a> <div class="highlight"></div> </div>