Estoy tratando de hacer dos encabezados, el encabezado secundario que tiene navegación está oculto. hay un icono en el encabezado principal. cuando paso el cursor por ese ícono, se muestra el encabezado secundario, pero cuando quito el cursor de ese ícono, el encabezado secundario también se oculta.
Quiero que cuando pase el mouse sobre el ícono, se muestre el encabezado secundario y no se oculte a menos que elimine el cursor de ese encabezado secundario.
lo que he probado hasta ahora.
CSS
.active{ display: block; } #menu_header{ position: absolute; width: 100% !important; top: 0; background: red; display: none; }JQuery
jQuery(document).ready(function( $ ){ $('#menu_header').hover(function(){ $(this).addClass('active'); }, function(){ $(this).removeClass('active'); }) $('#hover_button').mouseenter(function() { $('#menu_header').show(); }).mouseleave(function() { if(!$('#menu_header').hasClass('active')){ $('#menu_header').hide(); } }); });Por favor, ayúdame. Gracias por adelantado.
En la solución que desarrollé, cuando el mouse pasa sobre el elemento <h1> , se muestra el elemento <h2> . Para ocultar el elemento <h2> , el mouse debe pasar sobre el elemento <h2> y el evento mouseleave debe ocurrir en el elemento <h2> . Soluciones alternativas que se pueden utilizar:
<h2> se muestra cuando el cursor está sobre el elemento <h1> . Ocultar el elemento <h2> requiere un tiempo de espera y/o un evento mouseleave en el elemento <h2> .<h1> se pueden usar para ocultar y mostrar el elemento <h2> . jQuery(document).ready(function( $ ){ /* Edited the following line of code. */ $('#menu_header').hover(function(){ $('#menu_header').addClass('active'); }); /* Added the following line of code. */ $('#menu_header').mouseleave(function(){ $('#menu_header').addClass('passive'); $('#menu_header').hide(); }); $('#hover_button').mouseenter(function() { $('#menu_header').show(); }); }); .active{ display: block; } #menu_header{ position: absolute; width: 100% !important; top: 0; background: red; display: none; } <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <link rel="stylesheet" href="style.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="main.js"></script> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" integrity="sha512-Fo3rlrZj/k7ujTnHg4CGR2D7kSs0v4LLanw2qksYuRlEzO+tcaEPQogQ0KaoGN26/zrn20ImR1DfuLWnOo7aBA==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <title>Print-Shop Contact</title> </head> <body> <h1><i id="hover_button" class="fa fa-camera-retro fa-2x"></i></h1> <h2 style="margin-top: 100px;" id="menu_header">TEST</h1> </body> </html>