iframe hover issue

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Hello!</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
      .hoverme{
          z-index: 110000;
          position: fixed;
          bottom: 0;
          right: 0;
          background-color: red;
          width: auto;
          height: auto;
      }
      #next{
        position: absolute;
        bottom: 70px;
        right: 0;
        width: 100px;
        height: 50px;
        background-color: blue;
      }
      #preview{
          position: absolute;
        pointer-events: none;
          right: 0;
          bottom: 0;
          width: 100px;
          height: 100px;
          opacity: 0;
      }
      .hoverme:hover #preview{
            opacity: 1; 
      }
      .hoverme:hover #next{
            opacity: 0; 
      }
      #frame{
        width: 100vw;
        height: 100vh;
      }
    </style>
  </head>  
  <body>
    
   <iframe id="frame" src="https://www.wikipedia.com"></iframe>
  
    <a href="https://www.google.com" target="_self">
      <div class="glitchButton" style="position:fixed;top:20px;right:20px;"></div>
      <div class="hoverme" id="test">
        <div id="next">
          <div color="#FFFFFF" font-family="Roboto" font-weight="normal" font-size="24px">Next &nbsp;<i class="fa fa-arrow-right sc-hBbWxd csYcMm"></i></div>
        </div>
        <div id="preview">
          <div>
            <div color="#222222" font-family="Roboto" font-weight="normal" font-size="24px" id="anotherdiv">Next &nbsp;<i class="fa fa-arrow-right sc-hBbWxd csYcMm"></i></div>
            <div id="image">
              <img src="https://www.wikipedia.com">
            </div>
            <div color="#222222" font-family="Roboto" font-weight="bold" font-size="15px" id="override">Some content</div>
          </div>
        </div>
      </div>
    </a>
    <script...