css3 hover 触发显示

CSS3中的Hover（悬停）效果，常用来给网页添加一些鼠标悬停时的交互效果。以下是一个经典的Hover效果示例：

.hover {
      background-color: #fff;
      border: 1px solid #000;
      padding: 10px;
      width: 200px;
      height: 100px;
      transition: all .3s;
}
.hover:hover {
      background-color: #000;
      color: #fff;
      border-color: #fff;
}
    

上述代码中，我们为一个class为"hover"的元素设定了一个默认状态的样式，当鼠标悬停时，将应用另一组样式。

具体来说，我们为默认状态（即未悬停时）的元素设定了白色背景、黑色边框、10像素的内边距以及200像素的宽度和100像素的高度。我们还用"transition"属性指定了元素在状态改变时的过渡效果，这里是全部属性取值0.3秒的线性过渡效果。

当用户将鼠标悬停在该元素上时，我们将应用另一个样式，即黑色背景、白色文字、白色边框颜色。这个样式同样具有过渡效果，其过渡时间与默认状态相同。

这个Hover效果是CSS3中最基本的一个。我们也可以利用Hover实现更复杂的效果，例如弹出式菜单、动画效果、页面元素显隐切换等等。但无论什么效果，都离不开CSS3中的Hover技术。

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