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;
      }

你可能感兴趣的:(vue.js,CSS,javascript,css,vue.js)