當鼠標懸停在某個元素上時，如何不影響相鄰元素？

我試圖實現使用HTML和CSS的流程圖項目符號點，我已經使用懸停將邊框添加到一個div但它會影響附近的元素，任何提示以避免這將不勝感激？當鼠標懸停在某個元素上時，如何不影響相鄰元素？

.bullets { 
    display: inline-block; 
    height: 7px; 
    width: 7px; 
    background-color: grey; 
    border-radius: 50%; 
} 

.bullets:hover { 
    border: 5px solid lightgrey; 
} 

p { 
    display: inline; 
    margin-left: 5px; 
} 

.bulletChild { 
    margin-left: 20px; 
}

<body> 
    <div class="block"> 
    <div class="bullets"></div> 
    <p>this is workflowy clone</p> 
    <div class="bulletChild"> 
     <div class="bullets"></div> 
     <p>this is workflowy clone</p> 
    </div> 
    </div> 
</body>

我的小提琴：https://jsfiddle.net/renx777/mwvx8zdz/3/

來源

2017-07-17 Renuka Prasad A

什麼也沒有發生，因爲帶有'bullets'類的元素是空的。請提供[mcve]。 –

始終保持項目符號的邊框，但在非懸停狀態下使其透明。這將防止任何懸停轉移。 – Korgrue

你真的應該使用UL或OL標籤列表。

但考慮，而不是使用邊框當前的HTML，你可以使用的box-shadow：當我懸停在您所提供的任何片段

.bullets { 
 
    display:inline-block; 
 
    height: 7px; 
 
    width: 7px; 
 
    background-color:grey; 
 
    border-radius:50%; 
 
} 
 

 
.bullets:hover { 
 
    box-shadow: 0 0 0 5px black; 
 
} 
 

 
p { 
 
    display:inline; 
 
    margin-left:5px; 
 
} 
 

 

 
.bulletChild { 
 
    margin-left:20px; 
 
}

<body> 
 

 
    
 
    <div class="block"> 
 
    <div class="bullets"></div> 
 
    <p>this is workflowy clone</p> 
 
    <div class="bulletChild"> 
 
     <div class="bullets"></div> 
 
     <p>this is workflowy clone</p> 
 
    </div> 
 
    
 
    </div>

來源

2017-07-17 15:56:39 VilleKoo

當鼠標懸停在某個元素上時，如何不影響相鄰元素？

回答

相關問題