色轮选择器光标

Question

好吧，所以我创建了一个看起来像下面的色相轮：

我要实现的是在此顶部有一个白色小圆圈，当您将光标悬停（或拖动）到圆圈上时，该圆圈会改变位置。有什么想法吗？

for (var i=0; i<360; i++) {
	var color = document.createElement("span")
	color.setAttribute("id", "d" + i)
	color.style.backgroundColor = "hsl(" + i + ", 100%, 50%)"
	color.style.msTransform = "rotate(" + i + "deg)"
	color.style.webkitTransform = "rotate(" + i + "deg)"
	color.style.MozTransform = "rotate(" + i + "deg)"
	color.style.OTransform = "rotate(" + i + "deg)"
	color.style.transform = "rotate(" + i + "deg)"
	document.getElementById('colorwheel').appendChild(color)
};

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  background: linear-gradient(#111, #222);
  background: -webkit-linear-gradient(#111, #222);
  background: -moz-linear-gradient(#111, #222);
  background: -o-linear-gradient(#111, #222);
}

#colorwheel {
  margin: 20px auto;
  position: relative;
  width: 640px;
  height: 640px;
}

span {
  cursor: wait;
  position: absolute;
  top: 310px;
  left: 420px;
  width: 15px;
  height: 20px;
  -ms-transform-origin: -100px 50%;
  -webkit-transform-origin: -100px 50%;
  -moz-transform-origin: -100px 50%;
  -o-transform-origin: -100px 50%;
  transform-origin: -100px 50%;
  opacity: .1;
}

span:hover, span:active {
  opacity: 1;
  border-top-right-radius: 100%;
  border-bottom-right-radius: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="colorwheel"></div>