Question

我正在构建一个带有小点的侧边栏导航，以指示当前页面的不同部分

我的最终目标是在悬停时放大点，并显示该部分的标题

问题是，当您将鼠标悬停在任何其他点上时，最后一个点（DIV）会消失

HTML：

<div id="side-bar">
  <div class="side-bar-nav-dot"></div>
  <div class="side-bar-nav-dot"></div>
  <div class="side-bar-nav-dot"></div>
  <div class="side-bar-nav-dot"></div>
  <div class="side-bar-nav-dot"></div>
</div>

CSS：

#side-bar {
    position:  fixed;
    height: 100%;
    right:  10px;
    top:  40%;
    z-index:  9999999;
}

.side-bar-nav-dot {
    background:  black;
    height:  10px;
    width:  10px;
    margin-bottom:  20px;
    border-radius: 50px;
    cursor: pointer;
    z-index:  9999999;
}

.side-bar-nav-dot-grow {
    height: 20px;
    width:  20px;
    transition:  .3s;
}

.side-bar-nav-dot:hover {
    position: absolute;
    margin-top: -4px;
    margin-left: -4px;
    height: 19px;
    width:  19px;
    transition:  .3s;
}

Click here for Fiddle

Answer 1

早些时候我发布了另一个答案，实际上很糟糕。这是新的。它的工作原理应该如此。

https://jsfiddle.net/yhzqw8zt/38/

<div id="side-bar">
    <div class="wrapper">
        <div class="side-bar-nav-dot" style="background-color: red"></div>
    </div>
    <div class="wrapper">
        <div class="side-bar-nav-dot" style="background-color: blue"></div>
    </div>
    <div class="wrapper">
        <div class="side-bar-nav-dot" style="background-color: green"></div>
    </div>
    <div class="wrapper">
        <div class="side-bar-nav-dot" style="background-color: yellow"></div>
    </div>
    <div class="wrapper">
        <div class="side-bar-nav-dot" style="background-color: black"></div>
    </div>
</div>

<style>
#side-bar {
    position: fixed;
}

.side-bar-nav-dot, .wrapper {
    height: 10px;
    width: 10px;
    margin-bottom: 20px;
    border-radius: 50px;
}

.side-bar-nav-dot:hover {
    position: absolute;
    margin-top: -4px;
    margin-left: -4px;
    height: 19px;
    width: 19px;
    opacity: 0.5;
}
</style>

Answer 2

尝试从悬停类中移除位置：

.side-bar-nav-dot:hover {
    margin-top: -4px;
    margin-left: -4px;
    height: 19px;
    width:  19px;
    transition:  .3s;
}

当任何其他DIV悬停时，最后DIV消失

2 个答案: