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
}

Answer 2

在CSS中你可以使用svg的背景：

span {
  display: inline-block;
  padding: 50px;
  float:left;
  pointer-events:none;/* to trigger events only on img:hover */
}
img {
  display: block;
  border-radius: 100%;
  pointer-events:auto;/* catch mouse events so are parents seeing it too */
}
span:hover,
span +img:hover {
  background: url(data:image/svg+xml;base64,PHN2ZyBpZD0iY29sb3ItZmlsbCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2ZXJzaW9uPSIxLjEiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjMwMCIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPg0KICANCiAgPHBvbHlnb24gY2xhc3M9ImhleCIgcG9pbnRzPSIzMDAsMTUwIDIyNSwyODAgNzUsMjgwIDAsMTUwIDc1LDIwIDIyNSwyMCI+PC9wb2x5Z29uPg0KICANCjwvc3ZnPg==);
}
span + img {
  padding: 50px;/* those extra 50px catch hover too */
  
}

<span><img src="http://dummyimage.com/200x200&text=span-img"/></span>

<img src="http://dummyimage.com/200x200&text=img-alone" />

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

2 个答案: