以前我们会用mouseover|mouseout事件来暗挫挫的实现hover效果，而现在用CSS伪选择器的:hover和:focus什么的就直接搞定了。想到这里，内心止不住的伤感啊……魔法师们坚持住！咳咳，当然，CSS也并不是万能的，有些事情还是要跟事件配合完成，比如下面这个例子，对鼠标指针进行定位。这是相当简单的了是不，我们先搞个绝对定位的小球元素，下面是它的HTML：

<div class="plot"></div>

这是它的CSS：

.plot {
  position:absolute;
  background:rgb(175,50,50);
  width: 20px;
  height: 20px;
  border-radius: 20px;
  display: block;
  top:0;
  left:0;
}

我们监听并处理doucment的click事件，利用PageX和pageY对小球进行定位。注意啊这里，我们需要减去球的半径，以让球的中心在鼠标指针上：

var plot = document.querySelector('.plot'),
    offset = plot.offsetWidth / 2;
document.addEventListener('click', function(ev) {
  plot.style.left = (ev.pageX - offset) +