Así que hice una pantalla: bloquear cuando el mouse se desplaza sobre un cierto, y mostrar: ninguno cuando el cursor se aleja. '
Un div que hice que se muestra solo cuando el mouse pasa sobre un enlace determinado
el div tiene una pantalla: ninguno cuando el mouse se aleja del enlace
este es el codigo que he usado
HTML:
<a href="#" onmouseover="LoginShow()" onmouseout="LoginHide()">Login/Sign Up</a>JavaScript:
function LoginShow (){ document.getElementById("log").style.display="block";} function LoginHide(){ document.getElementById("log").style.display="none";}Pero no puedo hacer clic en el div porque tan pronto como trato de mover el cursor a los botones del div, el div no muestra ninguno ya que tengo que mover el cursor lejos del enlace.
Soy nuevo en JS, pero he visto que otras páginas web lo hacen, ¿cuál es la forma en que se muestra el div al pasar el mouse y se puede hacer clic y se muestra: ninguno solo cuando me alejo del div?
yo tambien he probado
<a href="#" onmouseover="LoginShow()">Login/Sign Up</a> <div class="login" id="log" onmouseover="LoginShow()" onmouseout="LoginHide()">De alguna manera resuelve el problema, pero para que el div vaya a mostrar ninguno, tengo que mover el cursor lejos del div, si mueve el cursor lejos de la etiqueta de anclaje, no desaparece.
Puede hacerlo sin ningún js, eche un vistazo al fragmento a continuación.
let target = document.getElementById('target'); function showLog() { target.style.display = 'block'; } function hideLog() { target.style.display = 'none'; } .wrapper { background: #eee; } .wrapper .inner-content { display: none; position: absolute; background: red; } <div class="wrapper" onmouseover="showLog()" onmouseout="hideLog()"> I am the wrapper <div class="inner-content" id="target"> <p>Here is some content inside wrapper element</p> </div> </div>Creo que se puede hacer con los selectores css, ya que puedes hacer que otro div sea el interruptor para cambiar otros elementos. Referencia para selectores css
Y creo que tu div es parte del botón, razón por la cual desaparecen. si ese es el caso, entonces debería intentar darle a su botón "posición: relativa" y luego a su elemento div la "posición: absoluta". podría funcionar.
Editado: esto es lo que probé, no es atractivo, pero míralo, si es lo que estás tratando de lograr.
function LoginShow (){ document.getElementById("log").style.display="block"; } function LoginHide(){ document.getElementById("log").style.display="none"; } .container{ width:400px; height:400px; background:lightgreen; border:1px red solid; } #log{ background:#efefef; padding:20px; width:100px; text-align: center; display:none; } .log>button{ padding:20px; } <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="custom.css"> </head> <body> <div class="container"> <a href="#" onmouseover="LoginShow()" onmouseout="LoginHide()">Login/Sign Up</a> <div id="log" onmouseover="LoginShow()" onmouseout="LoginHide()"><button>Sign Up</button></div> </div> <script src="main.js"></script> </body> </html>