css中的hover用法示例（可以在vue中制作鼠标悬停显示摸个按钮的效果）

css中的hover

1、hover的定义

hover选择器用于选择鼠标指针浮动在上面的元素，它适用于所有元素，可以用来实现类似于js的一些功能。

2.hover的作用

css中hover属性，鼠标移到上面的时候可以激活，它可以实现悬浮元素上改变样式，改变子元素的样式，改变同级的样式以及改变就近元素的样式等。

语法格式：

“元素:hover{css样式};”；“:hover”必须位于“:link”和“:visited”之后（如果存在的话），这样样式才能生效。

3.如何使用hover

用法1：

这个表示的是：当鼠标悬浮在a这个样式上的时候，a的背景颜色设置为绿色。这个是最普通的用法，只是通过a改变了style。

a:hover{ background-color:green;}

用法2:

使用a 控制其他块的样式：

1. 中间什么都不加控制子元素；

使用a控制a的子元素 b：

 .a:hover .b {background-color:blue;}

2. ‘+’ 控制同级元素（兄弟元素）；

使用a控制a的兄弟元素 c(同级元素)：

 .a:hover + .c {color:red;}

3. ‘～’ 控制就近元素；

使用a控制a的就近元素d：

 .a:hover ~ .d {color:pink;}