CODEWITHSUNDEEP
javascripthtmljquerycss
Javi Nitro 5
Javi Nitro 5

Reputation: 11

I want to display hidden buttons with js

I have this web page in construction, that should have a button that displays more buttons, but for some reason I don't know, these on hover hidden buttons don't appear (I've used this: https://es.stackoverflow.com/questions/126579/como-se-crea-un-bot%c3%b3n-que-despliegue-mas-botones). Any one know how to make this buttons appear? it seems to work fine with the snippet, then: what can be the problem? I whant it to be in separated files.

var flag = false;

$("#botones").mouseenter(function() {
  if (!flag) {
    flag = true;
    $("#resto").show(200, function() {
      flag = true;
    });
  }
}).mouseleave(function() {
  $("#resto").hide(200);
});
* {
  margin: 0px;
  padding: 0px;
}

div#general {
  margin: auto;
  display: grid;
  margin-top: 0%;
  width: 100%;
  height: 100%;
  background-color: #4f6d7a;
}

div#enlaces {
  float: center;
  display: center;
  width: 100%;
  height: 100px;
  background-color: #166088;
}

div#tablas_carpetas {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  height: 1400px;
  background-color: #DBE9EE;
}

div#tablas {
  order: 1;
  position: static;
  background-color: #dfc0c0;
  height: 600px;
  width: 40%;
}

div#carpetas {
  order: 2;
  width: 60%;
  height: 600px;
  background-color: green;
}

@media all and (max-width: 450px) {
  div#tablas_carpetas {
    display: grid;
  }
  div#tablas {
    width: 100%;
    order: 1;
  }
  div#carpetas {
    width: 100%;
    order: 2;
  }
}
<!doctype html>
<html lang="es">

<head>
  <title>Viewer</title>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" type="text/css" href="index_style_viewer.css">
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script src="botones.js"></script>
</head>

<body>
  <div id="general">
    <div id="enlaces">
    </div>
    <div id="tablas_carpetas">
      <div id="tablas">
      </div>
      <div id="carpetas">

        <div id="botones" onmouseover="">
          <button id="principal_1">Redes Sociales</button>
          <div id="resto" hidden>
            <button>Facebook</button>
            <button>Twitter</button>
            <button>LinkedIn</button>
            <button>Gooogle</button>
          </div>
        </div>
      </div>
    </div>
    <div id="anuncios">
    </div>
    <div id="pie">
    </div>
  </div>
</body>

</html>

Upvotes: 0

Views: 101

Answers (1)

Aneeb
Aneeb

Reputation: 789

you have issue with your js condition i simply tried with jquery it works perfectly

$(document).ready(function(){
  $("#botones").mouseenter(function(){
    $("#resto").show();
  });
  $("#botones").mouseleave(function(){
    $("#resto").hide();
  });
});
* {
  margin: 0px;
  padding: 0px;
}

div#general {
  margin: auto;
  display: grid;
  margin-top: 0%;
  width: 100%;
  height: 100%;
  background-color: #4f6d7a;
}

div#enlaces {
  float: center;
  display: center;
  width: 100%;
  height: 100px;
  background-color: #166088;
}

div#tablas_carpetas {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  height: 1400px;
  background-color: #DBE9EE;
  
}

div#tablas {
  order: 1;
  position:static;
  background-color: #dfc0c0;
  height: 600px;
  width: 40%;
}

div#carpetas {
  order: 2;
  width: 60%;
  height: 600px;
  background-color: green;
}

@media all and (max-width: 450px) {
  div#tablas_carpetas {
    display:grid;
  }
  div#tablas {
    width: 100%;
    order: 1;
  }
  div#carpetas {
    width: 100%;
    order: 2;
  }
}
<!doctype html>
<html lang="es">
    <head>
        <title>Viewer</title>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    </head>
    <body>
        <div id="general">
            <div id="enlaces">
            </div>
            <div id="tablas_carpetas">
                <div id="tablas">
                </div>
                <div id="carpetas">
                   
                    <div id="botones">
                        <button id="principal_1">Redes Sociales</button>
                        <div id="resto" hidden>
                            <button>Facebook</button>
                            <button>Twitter</button>
                            <button>LinkedIn</button>
                            <button>Gooogle</button>
                        </div>
                    </div>
                </div>
            </div>
            <div id="anuncios">
            </div>
            <div id="pie">
            </div>
        </div>
    </body>

</html>

Upvotes: 2

Related Questions