How to make border follow the cursor in the top navigation bar on a webpage

Question

I have a question. I am making a webpage and I got an idea that the top navigation bar would follow my cursor. Basically, I would like that the border around each link in the top bar would follow where I move my mouse cursor. I got this idea from iOS (specifically from photos) that has a lot of these cool features. Any idea how to accomplish this?

I am also providing you with a link to google drive where I posted the video because as I know you currently can't upload the video directly here.

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

Any help will be very appreciated.

Answer 1

Sorry, not very adaptative. Can't think about something better right now:

 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>