i am trying to make two headers, the secondary header that has navigation is hidden. there is icon in the primary header. when i hover that icon the secondary header is shown, but when i remove the cursor from that icon the secondary header is also hides.
I want that the when i hover the icon the secondary header must be shown and not hide unless i remove the cursor from that secondary header.
what I have tried so far.
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();
}
});
});
Please help me. Thanks in advance.
In the solution I developed, when the mouse hovers over the <h1> element, the <h2> element is displayed. To hide the <h2> element, the mouse must hover over the <h2> element and the mouseleave event must occur on the <h2> element. Alternative solutions that can be used:
<h2> element is displayed when the cursor is over the <h1> element. Hiding the <h2> element requires a timeout and/or a mouseleave event on the <h2> element.<h1> element mouseenter and mouseleave events can be used to hide and show the <h2> element.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>