Question

我对编码很新，我正在尝试实现点导航栏。以下是我的代码。

<html>
  <head>
<link rel="stylesheet" href="bootstrap3/css/bootstrap.min.css" >
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>


 <style>
/* Init */
html { width: 100%; height: 100%; }
body { 
  position: relative;
  width: 100%; height: 100%;
  background: #EA7E00; 
}
.dot-nav {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
}
/* Fin Init */

.dot-nav--item {
  position: relative;
  display: block;
  width: 16px; height: 16px;
  margin-bottom: 28px;
  border: 3px solid #fff;
  border-radius: 50%;
  &:before, &:after { content: ""; }
  &:before {
    position: absolute;
    top: -1px; bottom: -1px; left: -1px; right: -1px;
    transform: scale(0);
    opacity: 0;
    border-radius: 50%;
    background-color: #fff;
    transition: all .3s;
  }
  &:after {
    display: block;
    width: 3px; height: 30px;
    margin: 13px auto 0;
    background-color: #fff;
  }
  &:last-child:after { display:none; }
  &:hover { cursor: pointer; }
  &.is-active:before {
    opacity: 1;
    transform: scale(1);
  }
}
.dot-nav--link {
  position: absolute;
  top: 50%;
  visibility: hidden;
  transform: translate(-120%, -50%);
  width: 200px;
  padding: 5px 10px; 
  opacity: 0;
  color: #111; background-color: #fff;
  transition: all .3s;
  &:before {
    content: "";
    position: absolute;
    top: 50%; left: 100%; 
    width: 0; height: 0;
    border-width: 6px 0 6px 8px;
    border-color: transparent transparent transparent #fff;
    border-style: solid;    
    transform: translateY(-50%);
  }
  
  .dot-nav--item:hover & {
    visibility: visible;
    opacity: 1;
    transform: translate(-110%, -50%);
  }
}
      </style>
      <script type="text/javascript">
      $('.dot-nav--item').on('click', function(){
  $this = $(this),
  $siblings = $this.siblings();
  
  $this.addClass('is-active');
  $siblings.removeClass('is-active');
})
      </script>
  </head>
  <body><nav class="dot-nav">
  <ul class="dot-nav--list list-unstyled">
    <li class="dot-nav--item is-active"><a href="#" class="dot-nav--link">Lorem ipsum dolor.</a></li>
    <li class="dot-nav--item"><a href="#" class="dot-nav--link">Assumenda, officia omnis.</a></li>
    <li class="dot-nav--item"><a href="#" class="dot-nav--link">Sed, alias totam.</a></li>
    <li class="dot-nav--item"><a href="#" class="dot-nav--link">Officia, itaque, vitae!</a></li>
    <li class="dot-nav--item"><a href="#" class="dot-nav--link">Repellendus, veritatis, deserunt.</a></li>
  </ul>
</nav>
  </body>
    </html>

当我将鼠标悬停在它上面时，这些点似乎没有显示内容，当我点击它时也没有填充。我似乎无法找到错误。我怀疑它与脚本源有关，但我不太确定。你有什么建议吗？

Answer 1

您已将可见样式添加到错误的位置。请查看以下语法

 .dot-nav--item:hover & {
   visibility: visible;
   opacity: 1;
   transform: translate(-110%, -50%);
 }

您在课程.dot-nav--link下添加的上述样式。这是错的。它应该如下所示，您必须放在.dot-nav--links声明之后。

.dot-nav--item:hover .dot-nav--link {
   visibility: visible;
   opacity: 1;
   transform: translate(-110%, -50%);
}

因此，无论何时悬停项目，它都会尝试找到具有班级.dot-nav--link的孩子并使其可见。不确定你想通过jquery代码实现什么。

FIDDLE DEMO

Javascript点导航无法正常工作

1 个答案: