Question

我有40 * 40px png，透明背景，中间有30 * 30px圆圈。

我想将png用作具有简单悬停效果的按钮，但我希望仅当光标实际位于圆圈上而不是透明背景上时才会发生悬停效果。

是否有针对此的纯HTML + CSS解决方案？我试着在这里和其他论坛上查看它，但我没有找到任何东西。

Answer 1

是的，您可以使用HTML和CSS执行此操作。首先创建一个圆形元素并将其放在图像之前。然后将图像和圆圈包装在容器中，如下所示：

<div class="container">
  <div class="circle"></div>
  <img src="your-image.jpg" />
</div>

然后，使用position: absolute将圆圈定位在图像顶部（将其与图像中的圆圈对齐），并使用+选择器选择圆圈时的下一个相邻元素徘徊。

.container {
  position: relative;
}
.circle {
  position: absolute;
  top: 100px;
  left: 100px;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: #222;
}
.circle:hover+img {
  border: 5px solid aqua;
}

请参阅DEMO。

Answer 2

如果只有当鼠标位于圆圈内（而不是方形边界框中）时才需要激活悬停/点击，请查看此脚本http://tympanus.net/codrops/2011/11/22/hover-and-click-trigger-circular-elements/

仅在CSS中不可能，因为所有元素都被视为矩形，即使它们是用圆角渲染的。

没有背景的透明png按钮悬停

2 个答案: