爲div標籤鍍鉻的邊框半徑的工作

我有兩個圓形的同心圓。我必須在點擊這兩個圈子時顯示提醒。爲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鉻的左下角是給我警告工作正常對於circle1（預計爲圓2）。

有什麼辦法可以糾正這個問題嗎？

來源

2012-10-18 user1079065

我不完全理解你的問題，但使用此代碼沒有任何問題：

<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-18 06:53:02 Baronth

我認爲問題是這樣的事實，圈子重疊和點擊事件從邊界框（矩形不是圓圈）拋出。如果您點擊頂部的框2不重疊但不在（不可見）角的頂部，則它可以正常工作。小提琴：http://jsfiddle.net/XRdFC/2/ – Thomas

我知道它應該工作:(請在鉻中打開它，並在所有可能的位置單擊黃色圓圈 – user1079065

現在我明白了;正如托馬斯所說，問題在於div是一個正方形，即使你將它看作一個圓形;製作帶有邊框的圓形不會削減圓形的div部分 – Baronth

我認爲這裏沒有問題。

看看這個。 http://jsfiddle.net/XRdFC/

噢，我確實將'on-click'改爲'onclick'。可能有所作爲。

來源

2012-10-18 06:36:49

如果您添加'div {position：absolute}'，以便渲染與問題中的描述相匹配，則會出現問題中描述的問題。 – Quentin

謝謝...但我的圈子是同心的一個在另一個之上...我鍵入點擊以避免拼寫錯誤。 – user1079065

是的，這是我無法弄清楚，並得到了一個投票下來：P 無論如何，我希望昆汀的決議起作用。 –

您可以嘗試使用圖像映射：

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>

來源

2012-10-18 07:17:29 Aeoril

爲div標籤鍍鉻的邊框半徑的工作

回答

相關問題