[英]How can I make the text invisible when hovering over a tex and pressing the mouse button?
我是新手，告訴我如何實現，這樣當你 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>
現在你需要在鼠標點擊和空格上做，但我不太明白如何實現它
首先，您當前用於交換消息顯示的代碼（雖然是功能性的）並不是一個真正的好方法。 無需擁有兩個預先制作的文本版本，然后顯示/隱藏一個與另一個，只需擁有一個元素並在需要時更改其樣式。
至於讓元素隱藏然后移除，請看下面的代碼和注釋：
// 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>
如果我了解您需要正確完成的操作。 可以使用一些 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>
在Video.js中，當鼠標懸停在視頻上方時，在哪里可以更改大播放按鈕的顏色？
[英]In Video.js, where can I change the big play button color when the mouse is hovering over the video?
當鼠標懸停在鼠標上方時如何停止mouseOver文本閃爍
[英]How to stop mouseOver text from flickering when the mouse is hovering over it
當我使用鼠標 hover 使用 CSS 時，我試圖讓按鈕中的文本更改顏色
[英]I am trying to make the text in a button change color when I hover over in with the mouse using CSS
p5.js：當我的鼠標懸停在處理中的草圖中不同的文本元素上時，如何使文本出現？
[英]p5.js: How can I make text appear when my mouse hovers over a different text element in the sketch in processing?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.