Sub-menu takes up while taking Javascript mouse

Question

Sub-menu takes up while taking Javascript mouse

Navigation

#1 by (2 votes)
#2 by (1 votes)

3

I'm developing a web application and when I hover the mouse over the Enter / Register it shows me a submenu with some links, but when I go to one of the submenu links, the submenu disappears, how can I solve this problem?

$(document).ready(function() {
  $(".col-xs-3.col-md-3 .entre").on("mouseenter", function() {
    $(".conteudo_dropdow").show();
  });

  $(".conteudo_dropdow").on("mouseout", function() {
    $(".conteudo_dropdow").hide();
  });



});

.conteudo_dropdow {
  display: none;
}

.conteudo_dropdow {
  margin-top: 38px;
  left: 0;
  width: 75%;
  border: 1px solid black;
  position: absolute;
  background: #fff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<div class="col-xs-3 col-md-3">
  <h4 class="entre">Entre/Cadastre-se</h4>
</div>

<div class="conteudo_dropdow">

  <ul class="caixa">
    <div class="conteudo">
      <li><a href="#">Meus Pedidos</a></li>
    </div>
    <div class="conteudo">
      <li class="caixa_componentes"><a href="#">Efetuar Login</a></li>
    </div>
    <div class="conteudo">
      <li class="caixa_componentes"><a href="#">Alterar Dados</a></li>
    </div>
    <div class="conteudo">
      <li class="caixa_componentes"><a href="#">Sair</a></li>
    </div>
    </ul>
    </div>

javascript jquery css

asked by anonymous 02.02.2018 / 20:51

2 answers

2

Good afternoon. First, I find it unnecessary to use Javascript for an application like this, it can be solved only with CSS.

What I did was to pass the part of the menu that you want to appear into the header, and creating a "MENU" class for it.

In CSS I indicated that when the menu is under the : hover property, it should appear, by setting its display for "block".

This way it is better structured by not having to break the menu into several parts.

 .conteudo_dropdow {
  display: none;
}

.conteudo_dropdow {
  margin-top: 0px;
  left: 0;
  width: 75%;
  border: 1px solid black;
  position: absolute;
  background: #fff;
}

.menu:hover .conteudo_dropdow{
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<div class="col-xs-3 col-md-3 menu">
  <h4 class="entre">Entre/Cadastre-se</h4>
  <div class="conteudo_dropdow">

  <ul class="caixa">
    <div class="conteudo">
      <li><a href="#">Meus Pedidos</a></li>
    </div>
    <div class="conteudo">
      <li class="caixa_componentes"><a href="#">Efetuar Login</a></li>
    </div>
    <div class="conteudo">
      <li class="caixa_componentes"><a href="#">Alterar Dados</a></li>
    </div>
    <div class="conteudo">
      <li class="caixa_componentes"><a href="#">Sair</a></li>
    </div>
    </ul>
    </div>
</div>

02.02.2018 / 21:42

Sql Server - View the structure of View How can I read custom attributes without reflection?

score 1 · Accepted Answer

I've already replied something similar in this answer :

mouseout fires when the cursor exits any child element and of the element itself. The mouseleave is only activated when the cursor exits of the entire element.

So just change mouseout to mouseleave :

$(document).ready(function() {
  $(".col-xs-3.col-md-3 .entre").on("mouseenter", function() {
    $(".conteudo_dropdow").show();
  });

  $(".conteudo_dropdow").on("mouseleave", function() {
    $(".conteudo_dropdow").hide();
  });
});

.conteudo_dropdow {
  display: none;
}

.conteudo_dropdow {
  margin-top: 38px;
  left: 0;
  width: 75%;
  border: 1px solid black;
  position: absolute;
  background: #fff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="col-xs-3 col-md-3">
  <h4 class="entre">Entre/Cadastre-se</h4>
</div>

<div class="conteudo_dropdow">

  <ul class="caixa">
    <div class="conteudo">
      <li><a href="#">Meus Pedidos</a></li>
    </div>
    <div class="conteudo">
      <li class="caixa_componentes"><a href="#">Efetuar Login</a></li>
    </div>
    <div class="conteudo">
      <li class="caixa_componentes"><a href="#">Alterar Dados</a></li>
    </div>
    <div class="conteudo">
      <li class="caixa_componentes"><a href="#">Sair</a></li>
    </div>
    </ul>
    </div>