当鼠标悬停在某个元素上时，如何不影响相邻元素？

我试图实现使用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

当鼠标悬停在某个元素上时，如何不影响相邻元素？

回答

相关问题