[分享]css中常见的鼠标事件

CSS中提供了丰富的鼠标事件，可以通过以下几个属性来设置鼠标事件：

  element {
    cursor: pointer; /* 鼠标变为手型 */
  }

  element:hover {
    /* 鼠标滑过元素时的样式 */
  }

  element:active {
    /* 鼠标按下元素时的样式 */
  }

  element:focus {
    /* 元素获得焦点时的样式 */
  } 

其中，:hover可用于添加鼠标滑过效果，:active可用于添加鼠标点击效果，而:focus可用于添加输入框等元素获得焦点时的效果。

除此之外，CSS还提供了一个特殊的鼠标事件:onmouseover。它与:hover的效果类似，但是:hover只对当前元素有效，而onmouseover可以对当前元素及其子元素生效。

  element:hover {
    /* 当鼠标滑过element元素时 */
  }

  element *:hover { 
    /* 当鼠标滑过element元素及其子元素时 */
  }

  element:hover > .child { 
    /* 当鼠标滑过element元素时，选中其直接子元素.child */
  }

  element *:hover + .sibling { 
    /* 当鼠标滑过element元素或其子元素时，选中其同级下一个兄弟元素.sibling */
  }

  element:hover ~ .sibling { 
    /* 当鼠标滑过element元素时，选中其之后的所有兄弟元素.sibling */
  } 

最后，通过绑定JavaScript事件监听可以实现更多的鼠标事件效果，包括鼠标进入/离开元素、鼠标滚轮事件等等。