Sliding marker on link hover and click with jQuery

The code I’m bringing forward is for a vertical menu, where I needed a marker to do the following:

  • When hovering over a link the marker should slide down next to it.

  • When not hovering over a link the marker should return to the side of the current selected link (the default being the first link).

  • When a link is clicked the marker should remain next to the clicked link, unless another link is being hovered over.

What I’ve done in jQuery is add a class (‘.staydown0′,’.staydown1′ or ‘.staydown2’) to the marker div (‘#slide’) when one one of the links (‘#menulink1′,’#menulink2’ or ‘#menulink3’) is clicked, and remove any other classes that would have it be situated next to one of the other links.

Then I’ve set jQuery to add a class (‘.movedown0′,’.movedown1′ or ‘.movedown2’) to the marker div (‘#slide’) when the mouse hovers over one of the links (‘#menulink1′,’#menulink2’ or ‘#menulink3’), and remove the class when the mouse stops hovering over the link.

The code works, but it is redundant, how could I go about abstracting it?

I’ve already asked a similar question recently where I only had the “hover” part of the menu set up, and it was solved.

But I am a beginner in javascript and jQuery, and even though I’ve managed to understand the solution that was offered to me in the previous question, I am at a loss as to how to extrapolate that knowledge to abstracting this more convoluted code.

CODEPEN

HTML(Pug):

.staydown0#slide  #menu   a.menulink#menulink1(href="#")     p RED   a.menulink#menulink2(href="#")     p BLUE   a.menulink#menulink3(href="#")     p GREEN 

CSS (Sass)

a   color: white   text-decoration: none  #slide   width: 10px   height: 30px   position: absolute   border-radius: 15px   transition: 0.3s ease-in-out  #slide.staydown0   margin-top: 0px   background-color: red  #slide.staydown1   margin-top: 40px   background-color: blue  #slide.staydown2   margin-top: 80px   background-color: green  #slide.movedown0   margin-top: 0px   background-color: red   #slide.movedown1   margin-top: 40px   background-color: blue  #slide.movedown2   margin-top: 80px   background-color: green  #menu   margin-left: 30px  .menulink   height: 40px   width: 70px   display: block  .menulink p   height: 30px   width: 70px   margin: 0px   border-radius: 15px   display: flex   align-items: center   justify-content: center  #menulink1 p   background: red #menulink2 p   background: blue #menulink3 p   background: green  

jQuery

$  ('#menulink1').hover(   function(){     $  ('#slide').addClass('movedown0');   },   function(){      $  ('#slide').removeClass('movedown0')    });  $  ('#menulink2').hover(   function(){     $  ('#slide').addClass('movedown1');   },   function(){     $  ('#slide').removeClass('movedown1')    });  $  ('#menulink3').hover(   function(){     $  ('#slide').addClass('movedown2');   },   function(){     $  ('#slide').removeClass('movedown2')    });  ///////  $  ('#menulink1').on(   'click', function(){       $  ('#slide').addClass('staydown0').removeClass('staydown1 staydown2');  });  $  ('#menulink2').on(   'click', function(){     $  ('#slide').addClass('staydown1').removeClass('staydown0 staydown2');  });  $  ('#menulink3').on(   'click', function(){     $  ('#slide').addClass('staydown2').removeClass('staydown0 staydown1');  });  

Primary Navigation with Hover Dropdown clickable or not

We’ve got a design with a primary navigation menu that uses dropdowns when hovering over the links. We have two options:

  • Disable the primary links and mirror them in the dropdown so the user doesn’t miss the link.
  • Keep the primary links clickable without a mirror in the dropdown. (The concern here is that they won’t realize it is a link)
  • Clicking the primary links will bring up the dropdown which will include the primary link on top

What are your thoughts?

Sliding marker on link hover with jQuery

The following code is for a vertical menu, where I needed a marker to slide down next to a link upon hovering over said link. Therefore I needed to change CSS properties of a HTML element (the top-margin in this case).

What I’ve done in jQuery is add a class (‘.movedown1’ or ‘.movedown2’) to the marker div (‘#slide’) when the mouse hovers over one of the links (‘#menulink2’ or ‘#menulink3’), and remove the class when the mouse stops hovering over the link.

It works!…But is it a clean method to add/change CSS properties of a HTML element? Does it follow best practices for jQuery? I’ve only used jQuery a few times in the past so I’m not familiar with best practices.

Codepen

HTML(Pug):

#slide  #menu   a.menulink#menulink1(href="#")     p RED   a.menulink#menulink2(href="#")     p BLUE   a.menulink#menulink3(href="#")     p GREEN  

CSS (Sass)

a   color: white   text-decoration: none  #slide   width: 10px   height: 30px   background-color: red   position: absolute   border-radius: 15px   transition: 0.3s ease-in-out   .movedown1   margin-top: 40px   background-color: blue !important  .movedown2   margin-top: 80px   background-color: green !important  #menu   margin-left: 30px  .menulink   height: 40px   width: 70px   display: block  .menulink p   height: 30px   width: 70px   margin: 0px   border-radius: 15px   display: flex   align-items: center   justify-content: center  #menulink1 p   background: red #menulink2 p   background: blue #menulink3 p   background: green  

jQuery

$  ('#menulink2').hover(   function(){   $  ('#slide').addClass('movedown1');   },   function(){   $  ('#slide').removeClass('movedown1')    });  $  ('#menulink3').hover(   function(){   $  ('#slide').addClass('movedown2');   },   function(){   $  ('#slide').removeClass('movedown2')    });  

When using Hover to change the text color , it only works when screen minimizes

So , i have a button whose text color i want to change when hover over it , however it only changes the text color when screen minimizes

<div class="col-md-12">   <div class="col-md-6 col-xs-12 career"> 

Student Exploring careers

</div>  </div>  .career button{           margin-top:5%;         /*letter-spacing: 1px;*/         line-height: 25px;             font-size: 16px;             background-color: transparent;             border:none;             text-transform: uppercase;                 }  .career button:hover{          color:#000;         cursor: pointer;                     } 

UI colour on hover state

I’m not actually sure if this can be posted on here so rather than markdown my question, I’ll gladly delete this if it causes an offence to some.

I’m stuck on the ui of a website, I’ve been given a colour which works fine but I need to give it a hover state and I’m just finding the right combination.

What does everyone use to get a nice colour combinations?

See attached image, can anyone suggest a colour for the hover state?

Thanks

enter image description here

popover con Bootstrap dejando el hover para copiar contenido

he implementado unos links con popover de bootstrap 4 y ningún problema, el tema esta que quisiera que al hacer mouseover sobre el link y aparezca la info del popover, esta quede para poder copiar informacion de ella Copy/paste, y que al salir del popver fuera de su área vuelva al link original, solo falta ese detalle. gracias por la ayuda.. la idea tal cual como lo comento esta en www.udemy.com , en cada curso al pasar encima el popover hace lo que necesito. gracias

ej: introducir la descripción de la imagen aquí

¿Cómo agregarle un setTimeout a una función de hover?

Me encontré este efecto que esperar unos segundos antes de ocultar el contenido.

var timeout;  function hide() {     timeout = setTimeout(function () {         $  ("#tooltip").hide('fast');     }, 500); };  $  ("#tip").mouseover(function () {     clearTimeout(timeout);     $  ("#tooltip").stop().show('fast'); }).mouseout(hide);  $  ("#tooltip").mouseover(function () {     clearTimeout(timeout); }).mouseout(hide);
div {      display: none;      background-color: 'yellow';     border: 1px solid black;     width: 100px;     padding: 10px; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <a id="tip" href="#">Tooltip</a> <div id="tooltip">Tootlip contents</div>

Estaba tratando de agregar aquella funcionalidad a este código:

$  (document).ready(function(){   $  ("#myvid").hover(function(){     // Show our tooltip on hover     $  (".tooltip").show();   }, function(){     // Hide our tooltip     $  (".tooltip").hide();   }) }); 

Lo hice de esta forma: pero no funciono 🙁

$  (document).ready(function(){     var timeout;      fuction hide() {         timeout = setTimeout(function () {             $  ("#tooltip").hide('fast');         }, 500);     };    $  ("#myvid").hover(function(){     clearTimeout(timeout);     // Show our tooltip on hover     //$  (".tooltip").show();     $  (".tooltip").stop().show('fast');   }).hover(hide);     // Hide our tooltip   $  (".tooltip").hover(function () {     clearTimeout(timeout);     $  (".tooltip").hide();   }).hover(hide); }); 

Y este es mi código que me permite mostrar un titulo al hacer hover desde un iframe

$  (document).ready(function(){   $  ("#myvid").hover(function(){     // Show our tooltip on hover     $  (".tooltip").show();   }, function(){     // Hide our tooltip     $  (".tooltip").hide();   }) });
.tooltip {   height: 40px;   left: 0;   position: absolute;   top: 0;   width: 100%; } .tooltip .title-background {   background-color: #000;   height: 40px;   left: 0;   opacity: 0.6;   position: absolute;   top: 0;   width: 100%; } .tooltip .title-display { 	color: #fff;   font-size: 16px;   font-weight: 500;   left: 10px;   position: relative;   top: 6px; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="myvid">       <div class="tooltip" style="display:none;"><div class="title-background"></div><span class="title-display">Movie Title</span></div>       <iframe width="420" height="345" src="https://www.youtube.com/embed/XGSy3_Czz8k">       </iframe>     </div>