Event issue

Hello, I’m struggling with an event problem as follows: I have a page with two buttons and a text block. When I press one of the buttons, it hides along with the text block. When I press the other button, it remains visible, and the text reappears along with the first button.

My problem: My “txtHide” function works when the line “button01.style.display = “none”;” is not present. However, it does not work when this line is included.

This makes no sense to me; does anyone have an idea?

HTML:

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Events</title>
      <link href="./styles.css" rel="stylesheet">
      <script src="./events.js" defer></script>
   </head>
   <body>
      <section id="container">
         
         <p id="time"></p>
         
         <button class="button" id="button01">
            BT01 </br>click me to hide text
         </button>
            
         <article id="txt">
               <ul>
                  <li>The last mile is the part of the internet that connects homes and small businesses to the internet.
                     Currently, about 60 percent of residential internet connections in the United States are provided
                     by cable TV companies such as Comcast and Time Warner.
                  </li>
                  <li>Data centers are rooms full of servers that store user data and host online apps and content.
                     Some are owned by large companies such as Google and Facebook.
                  </li>
                  <li>
                     The backbone consists of long-distance networks — mostly on fiber optic cables — that carry data
                     between data centers and consumers.
                  </li>
               </ul>
         </article>
         
         <button class="button" id="button02">
            BT02 </br>hover me to reveal text
         </button>
      
      </section> 
   </body>
</html>

CSS:

.button {
   box-sizing: content-box;
   top: 50px;
   width: 10%;
   height: 35px;
   margin: auto;
   text-align: center;
   font-size: 0.7rem;
   background-color: burlywood;
   cursor: crosshair;
}

#button01 {
   display: block;
}

#txt {
   box-sizing: content-box;
   display: block;
   position: relative;
   width: 50%;
   margin: auto;
   font-size: 1rem;
   line-height: 2rem;
   text-align: justify;
}

#button02 {
   display: block;
}

JavaScript:

let button01 = document.getElementById("button01");
let button02 = document.getElementById("button02");
let time     = document.getElementById("time");
let txt      = document.getElementById("txt");


function txtHide(){
   button01.style.display = "none";
   txt.style.display = "none";
}


const txtReveal= () => {
   txt.style.display = "block";
   button01.style.display = "block";
}


button01.addEventListener("click", txtHide);
button02.addEventListener("mouseover", txtReveal);

So @Noxte on discord found the problem:
When button 01 is clicked, button 02 takes its place (since the text disappears and the display is set to block), so the cursor, in the microsecond after the click, is on button 02, revealing the text.