How can I make the text invisible when hovering over a tex and pressing the mouse button?-CodePudding

I'm new, tell me how to implement so that when you hover and click on the mouse button, the text should be made invisible. And when you click on the spacebar, it will be deleted from the page. Can this be done with just HTML and CSS? Or can it be implemented using JavaScript? Tell me how to do it better? Here is the code where I implemented the text change:

.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 >
  <div >
    <div >
      Junior Frontend Developer
    </div>
    <div >
      Junior Frontend Developer
    </div>
  </div>
</div>

Now you need to do it on mouse click and space, but I don’t really understand how to implement it

CodePudding user response：

Well first, your current code for swapping the display of the message (while functional) is not really a good approach. Instead of having two pre-made versions of the text and then showing/hiding one vs. the other, just have the one element and change its style when needed.

As for making the element become hidden and then removed, see the following code with comments:

// 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 >       
        <div >
            Junior Frontend Developer
        </div>test
      </div>
    </body>
</html>

CodePudding user response：

If I understood what you needed done correctly. It can be done using some CSS and JS.

Here's a code snippet

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