View and maintain submenu with Jquery

Asked

Viewed 84 times

0

I’m doing a submenu and when I pass the mouse an option shows a div with several options, then I made a mouseout in the class of this div to hide her but the point is that she disappears even navigating inside her.

Follow the code for anyone who can help:

$("#marcas_menu").mouseover(function(){
  $('.marcas').css({'display':'block'});
})

$(".marcas").mouseout(function(){
  $('.marcas').css({'display':'none'});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>


    <div class="marcas">	
    <div class="femininos">
		  <div class="border_tab"><h4>Femininos</h4></div>			
			<div>
				<ul>
				<li>Lorem lpsum</li>
				<li>Lorem lpsum</li>
				<li>Lorem lpsum</li>
				<li>Lorem lpsum</li>
				<li>Lorem lpsum</li>
				<li>Lorem lpsum</li>
				<li>Lorem lpsum</li>
				<li>Lorem lpsum</li>
				<li>Lorem lpsum</li>
			</ul>	
			<a href="#">Ver Todos</a>	
			</div>					
		</div>

		<div class="masculinos">
		<div class="border_tab"><h4>Masculinos</h4></div>
					<div>
				<ul>
				<li>Lorem lpsum</li>
				<li>Lorem lpsum</li>
				<li>Lorem lpsum</li>
				<li>Lorem lpsum</li>
				<li>Lorem lpsum</li>
				<li>Lorem lpsum</li>
				<li>Lorem lpsum</li>
				<li>Lorem lpsum</li>
				<li>Lorem lpsum</li>
			</ul>	
			<a href="#">Ver Todos</a>
			</div>	
		</div>

		<div class="infantis">
		<div class="border_tab"><h4>Infantis</h4></div>
					<div>
				<ul>
				<li>Lorem lpsum</li>
				<li>Lorem lpsum</li>
				<li>Lorem lpsum</li>
				<li>Lorem lpsum</li>
				<li>Lorem lpsum</li>
				<li>Lorem lpsum</li>
				<li>Lorem lpsum</li>
				<li>Lorem lpsum</li>
				<li>Lorem lpsum</li>
			</ul>
			<a href="#">Ver Todos</a>	
			</div>		
		</div>

		<div class="imagem_aqui"></div>
		
	</div> <!-- fim marcas -->

inserir a descrição da imagem aqui

jquery html5

  • If #marcas is out of #marcas_menu then when it moves the mouse to stay on top of #marcas is no longer in #marcas_menu and so it closes. A simple solution is to put the html of #marcas inside #marcas_menu

  • in case #tags_menu is in LI marks I’m still trying something :)

1 answer

1


Exchange the mouseout for mouseleave.

The mouseout is triggered when the cursor leaves any child element or the element itself. The mouseleave is only triggered when the cursor comes out of the whole element.

Browser other questions tagged jquery html5

You are not signed in. Login or sign up in order to post.