将链接转换为div标记块元素

Question

在此代码中，我想将中间块元素更改为链接的 div标记元素 而不是。我如何实现这一结果？

所有这些都是链接，我只想将中间的一个更改为div块元素。我想把它变成一个div块元素，所以我可以用它来做一些不涉及链接的东西。

它要求我提供更多细节但是这几乎总结了我在这里想要实现的目标。

这里有人可以帮我这么做吗？所有的帮助将不胜感激。

Middle Block：

    <style>
      .cover {
        width: 260px;
        height: 168px;
        cursor: pointer;
        background-image: linear-gradient( to right, transparent, transparent 83px, #0059dd 83px, #0059dd 86px, transparent 86px, transparent 174px, #0059dd 174px, #0059dd 177px, transparent 177px, transparent 260px), url("https://i.imgur.com/BBYxKcf.jpg");
        border: 3px solid #0059dd;
        font-family: Tahoma;
        font-weight: bold;
        font-size: 30px;
        color: #0059dd;
        cursor: pointer;
        line-height: 100px;
        text-align: center;
      }
      
      .links div {
        margin: 0 0 12px 0;
      }
      
      .links a {
        display: inline-block;
        width: 50px;
        height: 50px;
        background-color: green;
        transition: 0.5s ease-in-out;
      }
      
      .preventWrapping {
        white-space: nowrap;
      }
      
      .links a:hover,
      .links a:active,
      .links a:focus {
        background: blue;
      }
      
      .scrl a:visited {
        background: orange;
        color: #000000;
      }
      
      .scrl a:hover {
        background: red;
      }
      
      .hide {
        display: none;
      }
      
      .links div:last-child {
        margin-bottom: 0;
      }
      
      .test a {
        vertical-align: top;
      }
      
      .controls {
        display: inline-block;
        width: 50px;
        height: 50px;
        background-color: red;
      }
    
    </style>
     
    <div class="cover hide ">Links</div>
    
    <div class="test">
      <div class="links">
    
        <div class="preventWrapping ">
      
          <div>
            <a href="" target="_blank"></a>
            <a href="" target="_blank"></a>
            <a href="" target="_blank"></a>
            <a href="" target="_blank"></a>
            <a href="" target="_blank"></a>
          </div>
    
          <div>
            <a href="" target="_blank"></a>
            <a href="" target="_blank"></a>
            <a href="" target="_blank"></a>
            <a href="" target="_blank"></a>
            <a href="" target="_blank"></a>
          </div>
    
          <div>
            <a href="" target="_blank"></a>
            <a href="" target="_blank"></a>
            <a href="" target="_blank"></a>
            <a href="" target="_blank"></a>
            <a href="" target="_blank"></a>
          </div>
        </div>
      </div>
    </div>
    
    
      
    
    
    
    
    <script>
      (function iife() {
        "use strict";
    
        function hideClickedElement(evt) {
          var target = evt.target;
          target.classList.add("hide");
          document.querySelector(".test").classList.remove("hide");
        }
        var cover = document.querySelector(".cover");
        cover.addEventListener("click", hideClickedElement, false);
      }());
    
    </script>