Question

我有两个圆形的同心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）。

有没有办法纠正这件事？

Answer 1

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

<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”。

Answer 2

您可以尝试使用图片地图：

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

工作样本here

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>

Answer 3

我认为这里没有问题。

检查一下。 http://jsfiddle.net/XRdFC/

哦，我确实将'on-click'更改为'onclick'。可能会有所不同。

为div标签处理chrome的边缘半径

3 个答案: