用div替换无序按钮

Question

我有一个Instafeed JS代码，该代码基本上在我的网站上显示我的最新帖子，但是我遇到的问题是，我的无序列表圈子在不应该出现的时候会弹出。

这是实时预览（http://www.eventsinstlouis.com/promote.html/），将鼠标悬停在其中一张图片上，您会看到无序列表的圆圈弹出。

我可以用div替换ul和li标签，并且仍然保持相同的格式吗？

这是当前的样子：

我相信答案在于：

template: '<li><a href="{{link}}" target="_blank" id="{{id}}"><img src="{{image}}" /><ul class="insta-info"><li class="likes">{{likes}}</li><li class="comments">{{comments}}</li></ul></a></li>'

代码如下：

.topiecha-grid {
    width: 100%!important;
  }
  .topiecha-grid .header {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: center;
    padding: 3vh;
    color: #222;
    font-size: 18px;
    font-family: 'helvetica neue', arial, sans-serif;
    font-weight: 600;
  }
  .topiecha-grid .header::before {
    margin-right: 10px;
    content: '\f16d';
    color: #999;
    font-size: 1.8em;
    font-family: 'fontawesome';
    font-weight: normal;
  }
  .topiecha-grid > ul {
    position: relative;
    display: flex;
    flex-flow: column wrap;
    height: 100vh;
    max-height: 375px;
    font-size: 0;
    margin-bottom: 0px;
    padding-left: 20px;
    padding-right: 20px;
  }
  .topiecha-grid > ul > li {
    position: relative;
    width: calc(15% - 5px);
    height: calc(50%  - 3px);
  }
  .topiecha-grid > ul > li:first-of-type {
    padding-left: 5px;
  }
  .topiecha-grid > ul > li:nth-of-type(3n+1) {
    width: calc(23.35% - 5px);
    height: 100%;
  }
  .topiecha-grid > ul > li:nth-of-type(3n+2) {
    margin-bottom: 6px;
  }
  .topiecha-grid > ul > li:nth-of-type(n + 8) {
    display: none;
  }
  .topiecha-grid > ul > li a {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    transition: all 0.3s ease 0s;
  }
  .topiecha-grid > ul > li a > ul.insta-info {
    opacity: 0;
    visibility: hidden;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(20, 20, 20, 0.85);
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: center;
    transition: all 0.5s ease 0s;
  }
  .topiecha-grid > ul > li a > ul.insta-info > li {
    padding: 0 8px;
    color: #fff;
    font-size: 16px;
    font-family: 'Helvetica Neue', arial, sans-serif;
  }
  .topiecha-grid > ul > li a > ul.insta-info > li::before {
    margin-right: 4px;
    color: #fff;
    font-size: 1.2em;
    font-family: 'fontawesome';
  }
  .topiecha-grid > ul > li a > ul.insta-info > li.likes::before {
    content: '\f004';
    color: red;
  }
  .topiecha-grid > ul > li a > ul.insta-info > li.comments::before {
    content: '\f086';
  }
  .topiecha-grid > ul > li a img {
    display: inline-block;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    transition: all 0.3s ease 0s;
    -webkit-filter: grayscale(0);
            filter: grayscale(0);
  }
  .topiecha-grid > ul > li a:hover > ul {
    opacity: 1;
    visibility: visible;
  }
  .topiecha-grid > ul > li a:hover img {
    -webkit-filter: grayscale(70%);
            filter: grayscale(70%);
  }
  
  @media screen and (max-width: 870px) {
    .topiecha-grid > ul {
      display: flex;
      flex-flow: row wrap;
      align-items: stretch;
      justify-content: space-around;
      min-width: 100%;
      max-height: none;
      height: auto;
    }
    .topiecha-grid > ul > li {
      width: calc(32.5%);
      height: 200px;
      padding: 0;
      margin-bottom: 6px;
    }
    .topiecha-grid > ul > li:first-of-type {
      padding: 0;
    }
    .topiecha-grid > ul > li:nth-of-type(3n+1) {
      width: calc(32.5%);
      height: 200px;
    }
    .topiecha-grid > ul > li:nth-of-type(n + 8) {
      display: block;
    }
    .topiecha-grid > ul > li:nth-of-type(n + 10) {
      display: none;
    }
    .topiecha-grid > ul > li a > ul.insta-info {
      opacity: 1;
      visibility: visible;
      top: auto;
      bottom: 0;
      height: 50px;
    }
    .topiecha-grid > ul > li a > ul.insta-info > li {
      font-size: 14px;
    }
  }
  @media screen and (max-width: 580px) {
    .topiecha-grid > ul {
      display: flex;
      flex-flow: row wrap;
      align-items: stretch;
      justify-content: space-around;
      min-width: 100%;
      max-height: none;
      height: auto;
    }
    .topiecha-grid > ul > li {
      width: calc(48.5%);
      height: 300px;
      padding: 0;
      margin-bottom: 6px;
      margin-right: 0;
    }
    .topiecha-grid > ul > li:first-of-type {
      padding: 0;
    }
    .topiecha-grid > ul > li:nth-of-type(3n+1) {
      width: calc(48.5%);
      height: 300px;
    }
    .topiecha-grid > ul > li:nth-of-type(n + 9) {
      display: none;
    }
  }
  @media screen and (max-width: 450px) {
    .topiecha-grid > ul {
      display: flex;
      flex-flow: row wrap;
      align-items: stretch;
      justify-content: center;
      width: 100%;
      min-width: auto;
      max-height: none;
      height: auto;
      padding: 0;
    }
    .topiecha-grid > ul > li {
      width: 97%;
      height: 50%;
      margin: 0 0 5px 0;
    }
    .topiecha-grid > ul > li:nth-of-type(3n+1) {
      width: 98%;
      height: 50%;
    }
  }

<section class="sectionTwo pb-5">
    <div class="container-fluid">
                <div class="topiecha-grid">
                        <div class="header">Follow us on instagram</div>
                        <ul id="instafeed"></ul>
                     </div>
                     
                     <!-- JS - instafeed to include instagram content: photos/movies  https://github.com/stevenschobert/instafeed.js --> 
                     <script src="https://cdnjs.cloudflare.com/ajax/libs/instafeed.js/1.4.1/instafeed.min.js"></script>
                     <script type="text/javascript">
                       var userFeed = new Instafeed({
                         get: 'user',
                         userId: '4698959157',
                         accessToken: '4698959157.1677ed0.9b364775d6b74b48af382e7c8dd1ddca',
                         resolution: 'standard_resolution',
                         template: '<li><a href="{{link}}" target="_blank" id="{{id}}"><img src="{{image}}" /><ul class="insta-info"><li class="likes">{{likes}}</li><li class="comments">{{comments}}</li></ul></a></li>',
                         sortBy: 'most-recent',
                         limit: 9,
                         links: true
                         /** More options here: https://github.com/stevenschobert/instafeed.js/   **/
                       });
                       userFeed.run();
                </script>
    </div>
</section>

Answer 1

如果您希望删除悬停在列表元素上的这些圆圈，

这个小片段就是您需要添加到CSS中的全部内容，

#instafeed ul li {
    list-style: none;
}