Click through transparent div-CodePudding

I am making a pie-chart with only html and css using divs and conic-gradients. Each slice of the chart is a different div, and fills its section with a color, and the rest with a transparent color. Each slice should be clickable.

Here is the jsfiddle. Like I said earlier, each section should be clickable, but in the above code, when one item is clicked, all three functions are called. What can I do to fix this? I have already tried to use z-index, with no success.

HTML:

<div  id="slice1" onclick="click1()" />
<div  id="slice2" onclick="click2()" />
<div  id="slice3" onclick="click3()" />

CSS:

.slice {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  overflow: hidden;
}

#slice1 {
  background-image: conic-gradient(red 120deg, transparent 120deg);
}

#slice2 {
  background-image: conic-gradient(transparent 120deg, green 120deg, green 240deg, transparent 240deg);
}

#slice3 {
  background-image: conic-gradient(transparent 240deg, blue 240deg);
}

JS:

function click1() {
    console.log("1");
}

function click2() {
console.log("2");
}

function click3() {
console.log("3");
}

CodePudding user response：

In your .slice{} put that instead :

.slice {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  opacity: 0
}

You will be able to click it just fine.

CodePudding user response：

If you want to "click through" an element, you can add pointer-events: none; to its CSS (which would apply to all those transparent elements in you case). that way a click will be applied the element behind it.

CodePudding user response：

I don't think that you can achieve this with a div and an transparent gradient because the transparent part is still a part of the div. Maybe this svg-example will help you?

function click1() {
    console.log("1");
}

function click2() {
console.log("2");
}

function click3() {
console.log("3");
}

svg {
  width: 200px;
  border-radius: 50%;
  background: coral; 
  transform: rotate(-90deg);
}
 
circle {
  fill: none;
  stroke-width: 32;
  r: 16;
  cx: 16;
  cy: 16;
}
 
circle.first {
  stroke: blue;
 
}
circle.second {
  stroke: red;
}
  
circle.third {
  stroke: green;
}

<svg viewBox="0 0 32 32">
  <circle onclick="click1()"  class='first' stroke-dasharray="101 100"></circle>
  <circle onclick="click2()" class='second' stroke-dasharray="66 100"></circle>
  <circle onclick="click3()" class='third' stroke-dasharray="33 100"></circle>
</svg>