How to fix :hover on mobile site?

Question

css

Good day) There was a problem, could you help me.
There is a block, when you hover, links to download the file appear. But in the mobile version, hover does not plow, when you click on the block, the link is also clicked.

div class="box" >
      <p>Все</p>
      <div class="bgr"><img src="/img/icon/all.png" alt=""></div>
      <div class="btn">
        <ul>
          <a href="#" target="_blank">
            <li><ion-icon name="eye"></ion-icon><span>Просмотреть</span></li></a>
          <a href="#" download>
            <li><img src="/img/icon/pdf.png" alt=""><span>Скачать PDF</span></li></a>
          <a href="#" download>
            <li><img src="/img/icon/xls.png" alt=""><span>Скачать Excel</span></li></a>
        </ul>
      </div>
    </div>

Answer 1

How to fix :hover on mobile site?

@media screen and (max-width: 767px){
.element:hover{
стили
}
}