Soy nuevo, dígame cómo implementar para que cuando pase el mouse y haga clic en el botón del mouse, el texto se haga invisible. Y cuando haga clic en la barra espaciadora, se eliminará de la página. ¿Se puede hacer esto solo con HTML y CSS? ¿O se puede implementar usando JavaScript? ¿Dime cómo hacerlo mejor? Aquí está el código donde implementé el cambio de texto:
.body { background: #f1f1f1; font-family: tahoma; } .container { width: 600px; margin: 70px auto; } .block { padding: 40px; border: 1px solid #ddd; color: #666; background: #fff; } .eng { color: lime; font-family: sans-serif; display: none; } .container_1:hover .rus { display: none; } .container_1:hover .eng { display: block; } <div class="container"> <div class="container_1"> <div class="block rus"> Junior Frontend Developer </div> <div class="block eng"> Junior Frontend Developer </div> </div> </div>Ahora debe hacerlo con un clic del mouse y espacio, pero realmente no entiendo cómo implementarlo
Bueno, primero, su código actual para cambiar la visualización del mensaje (aunque funcional) no es realmente un buen enfoque. En lugar de tener dos versiones prefabricadas del texto y luego mostrar u ocultar una frente a la otra, solo tenga un elemento y cambie su estilo cuando sea necesario.
En cuanto a hacer que el elemento se oculte y luego se elimine, consulte el siguiente código con comentarios:
// Variable to store the last item that was clicked let lastClicked = null; // Set up a click event on the element document.querySelector(".block.eng").addEventListener("click", function(evt){ lastClicked = this; // Store a reference to what was just clicked this.classList.add("hidden"); // Add the CSS that hides the element }); // Set up the spacebar press event document.addEventListener("keypress", function(evt){ if(evt.key === " "){ // Check for spacebar lastClicked.remove(); // Remove the element from the document } }); .body { background: #f1f1f1; font-family: tahoma; } .container { width: 600px; margin: 70px auto; } .block { padding: 40px; border: 1px solid #ddd; color: #666; background: #fff; } .container_1:hover .eng{ color: lime; font-family: sans-serif; } .hidden{ opacity:0; } <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" href="style.css"type="text/css"> </head> <body> <div class="container_1"> <div class="block eng"> Junior Frontend Developer </div>test </div> </body> </html>Si entendí lo que necesitabas hecho correctamente. Se puede hacer usando algo de CSS y JS.
Aquí hay un fragmento de código
$(".MagicElement").on("click", function (element) { $(this).toggleClass("hidden"); }); $('body').keyup(function(e){ if(e.keyCode == 32){ // user has pressed space $(".MagicElement:hover").remove(); } }); .MagicElement:active { opacity: 0; } .hidden { opacity: 0; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class = 'MagicElement'>This is a block of text 1</div> <div class = 'MagicElement'>This is a block of text 2</div> <div class = 'MagicElement'>This is a block of text 3</div> <div class = 'MagicElement'>This is a block of text 4</div>