Tengo una pregunta. Estoy creando una página web y se me ocurrió que la barra de navegación superior seguiría mi cursor. Básicamente, me gustaría que el borde alrededor de cada enlace en la barra superior siguiera donde muevo el cursor del mouse. Obtuve esta idea de iOS (específicamente de las fotos) que tiene muchas de estas características geniales. ¿Alguna idea de cómo lograr esto?
También le proporciono un enlace a Google Drive donde publiqué el video porque, como sé, actualmente no puede cargar el video directamente aquí.
https://drive.google.com/file/d/17nqIWUtp0Smr4I8RzWJDahjYioLxtwdQ/view?usp=sharing
Cualquier ayuda será muy apreciada.
Lo siento, no muy adaptable. No puedo pensar en algo mejor en este momento:
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>