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.
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>