最後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消失

回答

相關問題