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

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;
}

见演示。

Answer 2

如果您需要仅当鼠标在圆圈内（而不是在方形边界框内）时才需要激活悬停/单击，请查看此脚本http://tympanus.net/codrops/2011/11/22/hover-and-click-触发圆形元素/

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