css3 hover 悬停效果

CSS3中悬停效果（hover）是一种非常常用的页面效果，可以让页面元素在鼠标悬停上去的时候呈现出一种不同的样式，很好地提高了页面的交互性和美观度。

/* hover样式的基本格式 */选择器:hover {
       属性1: 值1;
      属性2: 值2;
  ...}

上述代码中的“选择器”可以是任何CSS选择器，包括类选择器（.class）、ID选择器（#id）、标签选择器等等。下面通过几个例子来演示hover效果：

/* 例子1：鼠标悬停改变字体颜色 */p:hover {
      color: red;
}
/* 例子2：鼠标悬停改变背景颜色和字体颜色 */.button:hover {
      background-color: blue;
      color: white;
}
/* 例子3：鼠标悬停显示隐藏元素 */.hide {
      display: none;
}
.parent:hover .hide {
      display: block;
}
    

在上述例子中，例子1和例子2都是很常用的hover效果，分别是改变字体颜色和改变背景颜色。而例子3则比较特殊，利用了CSS中的选择器嵌套，使得在父元素上悬停的时候子元素显示。

在实际应用中，hover效果可以很好地应用于导航栏、按钮、图片等等场景，使得页面的交互性更强，用户的体验更好。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！