javascript - 悬停时在图像周围显示 SVG

Question

所以我想在悬停时在 img 周围添加形状。

我的 img 有 50% 的边框半径，但显示的形状是六边形 (SVG)。

我可以只用 CSS 实现吗？或者我需要使用 JS？

Answer 1

您可以将 SVG 六边形图像作为 div 的背景，您可以将其隐藏起来，然后您可以在该 div 中显示您的图像，并且在您的图像悬停事件时，您可以显示父 div 中声明的六边形图像。

你可以有类似下面的 css :

.parent-div .svg-img{
display:hidden;
}

.child-img:hover .child-img:parent img{
display:block
}