最后DIV消失

-1

我建设小点的侧栏导航指示当前页面最后DIV消失

我的最终目标是扩大在悬停点的不同部分，并且显示的标题部分

的问题是，当你将鼠标悬停在任何其他点的最后一个点（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

来源

2017-10-08 Devon Deason

https://jsfiddle.net/yhzqw8zt/33/接近 –

-1

尝试从悬停类中删除的位置：

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

来源

2017-10-08 19:49:15

你尝试，在小提琴？ –

@DevonDeason是的，它的工作 –

并且所有的点都保持原位吗？目标是只有一个扩大规模，其他所有的点仍然存在 –

早先我发布另一个答案，这实际上是坏的。这是新的。它的工作原理应该如此。

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>

来源

2017-10-08 20:26:14

这很棒！偶然的，你有解释为什么最后一个点消失了吗？ –

@DevonDeason它有'position：absolute'的东西。 '绝对'点悬停，**字面上**，下一个点位于同一地点。你可以看到这种效果，如果你添加颜色到原始的（不工作的代码）。换句话说，**最后**点不会消失。相反，盘旋后的下一个点将移动到一个位置。 –

最后DIV消失

回答

相关问题