如何使用css从浏览器添加悬停效果

我正在尝试将悬停效果添加到我的web应用程序中

我用过：

  .families-container{
margin-bottom: 1em;
padding-bottom: 2em;
height: 22%;
border: solid black 2px;
border-radius: 15px;
background-color: #D8D8D8;
padding-left: 3em;
padding-top: 1em;
display: table;
width: 97%;

}

我试图将轮廓悬停效果添加到容器中。当你在chrome或firefox中选择一个框时，我想要那个蓝色的轮廓，但我添加的轮廓并没有环绕原始容器

.hover-effect:hover {
 box-shadow: 3px 4px 14px black;
 outline: solid rgb(19,108,214,0.8) 3px;
 outline-offset: -5px;
   }

轮廓显示了一个蓝色的方形框，我正在寻找一个圆形框。

---

是否有一些webkit我可以用来添加悬停轮廓，以便它匹配曲线边。你能改变轮廓的半径吗？为任何浏览器创建悬停效果的代码是什么？

您可以为此使用绝对定位的伪元素。正常隐藏伪元素，并将其悬停显示

.families容器{
边缘底部：1米；
垫底：2米；
身高：22%；
边框：纯黑2px；
边界半径：15px；
背景色：#D8D8D8；
左：3em；
垫面：1米；
显示：表格；
宽度：97%；
位置：相对位置；
}
.families容器：：之后{
内容：“；
位置：绝对位置；
顶部：-4px；
左：-4px；
宽度：计算（100%+4px）；
高度：计算（100%+4px）；
背景色：透明；
边框：2倍实心rgb（19108214,0.8）；
盒影：3px44px黑色；
边界半径：17px；
显示：无；
}
.families容器：悬停：：之后{
显示：块；
}