在我的网页上，我希望有一组由多个大小不同的同心圆组成的组，当鼠标悬停在每个同心圆上时会显示一个菜单。
到目前为止，我已经创建了4张除圆圈外均为100％透明的图片，并将它们彼此层叠。但是，当我将鼠标悬停在一组圆上时，顶部图像的透明部分会导致发生鼠标悬停事件。我该如何处理？
供参考，这里是我到目前为止的代码。
<html>
<head>
<style type="text/css">
img
{
position:fixed;
left: 0;
bottom: 0;
}
</style>
<title>Circle Test</title>
</head>
<body>
<img src="Circle2.png" onMouseover="alert('Button2')"/>
<img src="Circle4.png" onMouseover="alert('Button4')"/>
<img src="Circle3.png" onMouseover="alert('Button3')"/>
<img src="Circle1.png" onMouseover="alert('Button1')"/>
</body>
</html>
最佳答案
纯图像很难做到这一点，因为很难分辨出鼠标何时真正位于图像的圆圈上。我建议使用客户端image map，因为它们可让您定义非矩形形状的可点击区域。将href设置为“ javascript：circleClicked（）;无效0;” ：D
关于html - 如何使HTML中的同心圆正确响应mouseOver？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/2353301/