Dropdown on hover con event-pointer

In this example below you will see how to do a Dropdown on hover con event-pointer with some HTML / CSS and Javascript

Dropdown on mouseover + on mouseout El triger para mostrar el dropdown es el div padre #activate-dropdown. Pero el div hijo con el contenido del dropdown está presente en la página, solo que con opacity 0. Para que no se dispare el triger cuando el cursor pasa por encima del div contenido cuando no se está mostrando le añado pointer-events none.

Thumbnail
This awesome code was written by jpcpamies, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright jpcpamies ©
  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Dropdown on hover con event-pointer</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <nav>
  <div id="activate-dropdown" class="dropdown">
    <span>Guías</span>
    <div class="dropdown-content">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque placeat molestias voluptas vitae cupiditate voluptatem repellendus architecto, animi ipsum impedit asperiores ducimus similique blanditiis! Hic, nostrum, necessitatibus! Laudantium, ea eligendi.</p>
   </div>
</nav>
  
  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/jpcpamies/dropdown-on-hover-con-event-pointer-mRBowN */
body {
  background-color: #808080;
}
#activate-dropdown {
  cursor: pointer;
}
.dropdown {
  perspective: 1000px;
}
.dropdown-content {
  pointer-events: none;
  position: absolute;
  top: 20px;
  background-color: #fff;
  opacity: 0;
}
.dropdown-show {
  pointer-events: all;
  opacity: 1;
}


/*Downloaded from https://www.codeseek.co/jpcpamies/dropdown-on-hover-con-event-pointer-mRBowN */
// Trigering botón on hover en menú desktop
$('#activate-dropdown').mouseover(function () {
  $('.dropdown-content').toggleClass('dropdown-show');
});

$('#activate-dropdown').mouseout(function () {
  $('.dropdown-content').toggleClass('dropdown-show');
});

Comments