Html 当鼠标悬停在图元上时，如何不影响相邻图元？

我正在尝试使用html和CSS实现Workflow要点，我曾使用hover向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;
}

这是workflowy克隆

这是workflowy克隆

---

我的小提琴：

你真的应该在列表中使用UL或OL标签

但考虑到您当前的HTML，您可以使用方框阴影，而不是使用边框：

。项目符号{
显示：内联块；
高度：7px；
宽度：7px；
背景颜色：灰色；
边界半径：50%；
}
.子弹：悬停{
长方体阴影：0 5px黑色；
}
p{
显示：内联；
左边距：5px；
}
Bullettchild先生{
左边距：20px；
}

这是workflowy克隆

这是workflowy克隆

您确实应该在列表中使用UL或OL标记

但考虑到您当前的HTML，您可以使用方框阴影，而不是使用边框：

。项目符号{
显示：内联块；
高度：7px；
宽度：7px；
背景颜色：灰色；
边界半径：50%；
}
.子弹：悬停{
长方体阴影：0 5px黑色；
}
p{
显示：内联；
左边距：5px；
}
Bullettchild先生{
左边距：20px；
}

这是workflowy克隆

这是workflowy克隆

当我将鼠标悬停在您提供的代码段中的任何内容上时，都不会发生任何事情，因为带有

项目符号的元素是空的。请提供一个。始终保持项目符号周围的边框，但在非悬停状态下使其透明。这将防止在悬停时发生任何移动。当我将鼠标悬停在您提供的代码段中的任何内容上时，都不会发生任何事情，因为带有
项目符号
类的元素是空的。请提供一个。始终保持项目符号周围的边框，但在非悬停状态下使其透明。这将防止悬停时的任何移动。