I am currently working on a web page that includes a button to display more buttons upon hover. However, I am facing an issue where the hidden buttons do not appear when hovered over. I referred to this solution: . Can anyone provide guidance on why these buttons are not displaying? The snippet seems to work fine. Is there something specific causing the problem? Also, I would like to have the code in separate 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>