Mi objetivo es hacer que el texto cambie al pasar el mouse de "hola" (sin un enlace) a "Google" y proporcionar un 'href' en el texto "Google" resultante, y luego volver a "hola" al pasar el mouse sin un enlace.
El siguiente código funciona para cambiar el texto de "hola" a "Google", pero,
el enlace en "Google" no funciona (aunque puedo hacer clic derecho en "Google" y abrir el enlace en otra pestaña)
el texto no vuelve a cambiar a "hola" cuando sale el ratón.
¡Gracias por su ayuda de antemano!
Aquí está mi código:
<style> .container { margin-top: 6vw; margin-left: 40%; margin-right: 40%; } </style> <div class="container"> <h1> <div class="hello" id="hello1" onmouseover="changeText()" onmouseout="changeText(this,'Hello.')">Hello.</div> </h1> </div> <script> function changeText() { if (document.getElementById("hello1")) { a = document.getElementById("hello1") a.innerHTML = '<a href="https://www.google.com">Google</a>' } } </script>prueba de esta manera onmouseout="this.innerHTML='Hello.';"
function changeText() { if (document.getElementById("hello1")) { a = document.getElementById("hello1") a.innerHTML = '<a href="https://www.google.com">Google</a>' } } .container { margin-top: 6vw; margin-left: 40%; margin-right: 40%; } <div class="container"> <h1> <div class="hello" id="hello1" onmouseover="changeText()" onmouseout="this.innerHTML='Hello.';">Hello.</div> </h1> </div>Al cambiar una clase de una etiqueta principal, todas y cada una de las etiquetas secundarias pueden verse afectadas a través de CSS. Tener el HTML listo cuando se carga la página y luego ocultarlo es mejor que crear y destruir HTML constantemente para efectos triviales.
Los eventos "mouseenter" y "mouselrave" son manejados por un controlador de eventos de propiedad y un detector de eventos . Cualquiera de los dos es suficiente, pero evite usar controladores de eventos de atributo:
<div onmouselame="lameAttributeEventHandler()">...</div>
Los detalles se comentan en el siguiente ejemplo.
// Reference the <header> const hdr = document.querySelector('.title'); /* This is a property event handler // Whenever the mouse enters within the borders of // the <header>: // '.google' class is added // '.hello' class is removed */ hdr.onmouseenter = function(event) { this.classList.add('google'); this.classList.remove('hello'); }; /* This is an even listener // Whenever the mouse exits the <header> the // opposite behavior of the previous handler // happens */ hdr.addEventListener("mouseleave", function(event) { this.classList.add('hello'); this.classList.remove('google'); }); .title { height: 50px; margin-top: 3vh; border: 3px solid black; text-align: center; } h1 { margin: auto 0; } .hello span { display: inline-block; } .hello a { display: none; } .google a { display: inline-block; } .google span { display: none; } <header class="title hello"> <h1> <span>Hello</span> <a href="https://www.google.com">Google</a> </h1> </header>Puedes probar esto, que te ayude a resolver el problema.
<!DOCTYPE html> <head> <title>change text on mouse over and change back on mouse out </title> <style> #box { float: left; width: 150px; height: 150px; margin-left: 20px; margin-top: 20px; padding: 15px; border: 5px solid black; } </style> </head> <html> <body> <div id="box" onmouseover="changeText('Yes, this is Onmouseover Text')" onmouseout="changeback('any thing')" > <div id="text-display" > any thing </div> </div> <script type="text/javascript"> function changeText(text) { var display = document.getElementById('text-display'); display.innerHTML = ""; display.innerHTML = text; } function changeback(text) { var display = document.getElementById('text-display'); display.innerHTML = ""; display.innerHTML = text; } </script> </body> </html>