将鼠标悬停在 tex 上并按下鼠标按钮时，如何使文本不可见？

Question

我是新手，告诉我如何实现，这样当你 hover 并单击鼠标按钮时，文本应该是不可见的。 当您单击空格键时，它将从页面中删除。 这可以只用 HTML 和 CSS 来完成吗？ 或者可以使用 JavaScript 来实现吗？ 告诉我如何做得更好？ 这是我实现文本更改的代码：

 .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>

现在你需要在鼠标点击和空格上做，但我不太明白如何实现它

Answer 1

首先，您当前用于交换消息显示的代码（虽然是功能性的）并不是一个真正的好方法。 无需拥有两个预先制作的文本版本，然后显示/隐藏一个与另一个，只需拥有一个元素并在需要时更改其样式。

至于让元素隐藏然后移除，请看下面的代码和注释：

 // 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>

Answer 2

如果我了解您需要正确完成的操作。 可以使用一些 CSS 和 JS 来完成。

这是一个代码片段

 $(".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>

将鼠标悬停在 tex 上并按下鼠标按钮时，如何使文本不可见？

问题描述

2 个解决方案

解决方案1
1 已采纳 2022-01-19 15:25:17

解决方案2
0 2022-01-19 15:16:48

将鼠标悬停在 tex 上并按下鼠标按钮时，如何使文本不可见？

问题描述

2 个解决方案

解决方案1 1 已采纳 2022-01-19 15:25:17

解决方案2 0 2022-01-19 15:16:48

解决方案1
1 已采纳 2022-01-19 15:25:17

解决方案2
0 2022-01-19 15:16:48