Question

我正在使用名为fullPage.js的jquery插件。它似乎有很好的记录，但我很难找到导航点对齐的任何东西。当我使它们变大（通过css修改）时，悬停和活动属性的对齐将被抛弃请参阅下面包含对齐错误的小提琴： http://jsfiddle.net/pingo_/b1k9wt39/

我还在StackExchange上粘贴了代码，但它没有渲染错误（点的大小似乎不大）：

$(document).ready(function() {
  $('#fullpage').fullpage({
    css3: true,
    navigation: true,
    navigationPosition: 'right',
    keyboardScrolling: true,
    controlArrows: true
  });
});

#fp-nav ul li a.active span,
.fp-slidesNav ul li a.active span {
  background: #004e7b;
  position: absolute;
}
#fp-nav ul li a span,
.fp-slidesNav ul li a span {
  border: 1px solid #004e7b;
  background: rgba(0, 0, 0, 0);
  height: 10px;
  width: 10px;
  border-radius: 50%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="http://alvarotrigo.com/fullPage/jquery.fullPage.min.js"></script>
<link href="http://alvarotrigo.com/fullPage/jquery.fullPage.css" rel="stylesheet"/>

<body>
  <div id="fullpage">
    <div class="section" id="section0">
      <h2>B A N N E R</h2>

      <h3>Tagline</h3>

    </div>
    <div class="section" id="section1">
      <h2>Section 1</h2>

      <h3>Placeholder</h3>

    </div>
    <div class="section" id="section2">
      <h2>Section 2</h2>

      <h3>Placeholder</h3>

    </div>
    <div class="section" id="section3">
      <h2>Section 3</h2>

      <h3>Placeholder</h3>

    </div>
    <div class="section" id="section4">
      <h2>Section 4</h2>

      <h3>Placeholder</h3>

    </div>
  </div>
</body>

如果删除高度和宽度代码 height: 10px; width: 10px; 从我在jsfiddle的css中，你会看到默认设置完美对齐。虽然这很好，但我希望非活动点与活动点大小相同（更多更平坦/更平滑的设计）。谁能帮我这个？什么可以轻松完成或稍微复杂一点？

谢谢！

Answer 1

这应该是修复悬停和活动状态所需的CSS：

#fp-nav ul li:hover a span,
.fp-slidesNav ul li:hover a span,
#fp-nav ul li a.active span, 
.fp-slidesNav ul li a.active span, 
#fp-nav ul li:hover a.active span,
.fp-slidesNav ul li:hover a.active span {
    width: 8px;
    height: 8px;
    margin: -2px 0 0 -2px;
}

http://jsfiddle.net/b1k9wt39/4/

fullPage.js垂直滑块导航点

1 个答案: