.hover{ background-color: #ccc; } .hover:hover{ background-color: #aaa; }
第一种是hover状态下改变背景颜色。当鼠标悬浮在元素上时,通过:hover选择器来改变元素的样式。可以根据需求改变元素的大小、颜色、边框等样式。
.img-hover{ transform: scale(1.1); } .img-hover:hover{ transform: scale(1.3); }
第二种是hover状态下放大图片。通过transform属性的scale方法可以实现放大图片效果。当鼠标悬浮在图片上时,将图片缩放比例从原来的1.1倍变为1.3倍。
.tooltip{ position: relative; } .tooltip:hover::after{ content: "这是提示信息"; position: absolute; bottom: 130%; left: 50%; transform: translateX(-50%); padding: 5px; background-color: #000; color: #fff; border-radius: 5px; }
第三种是hover状态下显示提示信息。通过伪元素::after来实现,设置position属性为absolute可以使提示信息在父元素内相对定位。通过bottom、left属性来控制提示信息的出现位置,通过padding、background-color、color和border-radius等属性来设置提示信息的样式。
.collapse{ height: 0; overflow: hidden; transition: height 0.5s; } .collapse:hover{ height: 100%; }
第四种是hover状态下展开元素。这种方法的实现是将要展开的元素高度设置为0,通过overflow:hidden属性隐藏元素。当鼠标悬浮在容器上时,通过改变高度实现元素的展开。通过transition属性来实现平滑展开效果。