1

我有两个圆形同心 div 一个在另一个上。我必须在点击这两个圆圈时显示警报。

我的 HTML 代码如下所示：

<div id="circle2" style="position: absolute.display:none;left:14px;top:35px;width:266px;height:266px;background-Color:#EFA927;border-radius:50% 50%;" onclick="alert('2');"></div>

<div id="circle1" style="position: absolute;display:none;left:31.5px;top:52.5px;width:231px;height:231px;background-Color:#0080C0;border-radius:50% 50%;" onclick="alert('1');"></div>

一切对 Mozilla 来说都很好，但是对于 circle1 的左上角、右上角、上下角、左下角的 chrome，chrome 让我对 circle1 发出警报（预期为圆 2）。

有什么办法可以纠正这个问题吗？

4

3 回答 3

3

我不完全理解您的问题，但是使用此代码没有问题：

<div id="circle2" style="left:14px;top:35px;width:266px;height:266px;background-Color:#EFA927;border-radius:50% 50%;" onclick="alert('2');"></div>

<div id="circle1" style="left:31.5px;top:52.5px;width:231px;height:231px;background-Color:#0080C0;border-radius:50% 50%;" onclick="alert('1');"></div>

当你点击 时circle1，它会提示“1”，点击circle2它会提示“2”。

于 2012-10-18T06:53:02.720 回答
1

您可以尝试使用图像映射：

http://www.w3.org/TR/2010/WD-html5-20101019/the-map-element.html#image-maps

https://developer.mozilla.org/en-US/docs/HTML/Element/map

https://developer.mozilla.org/en-US/docs/HTML/Element/Img

工作样本在这里

HTML：

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <img src="concentricCircles_304x304_284x284.png" usemap="#annularMap" alt="Circle within circle">
    <map name="annularMap">
        <area id="inner" shape=circle coords="152,152,142" alt="Red circle" onclick="alert(2);">
        <area id="outer" shape=circle coords="152,152,152" alt="Yellow border" onclick="alert(1);">
    </map>
</p></body>
</html>
于 2012-10-18T07:17:29.647 回答
0

我认为这里没有问题。

看一下这个。http://jsfiddle.net/XRdFC/

哦，好吧，我确实将“点击”更改为“点击”。可能有所作为。

于 2012-10-18T06:36:49.973 回答