css3 hover伪类选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .content { position: relative; width: 300px; height: 300px; } .static-content { position: absolute; width: 100%; height: 100%; opacity: 1; background: #ffe4c4; transition: opacity 0.5s ease-in-out; } .hover-content { position: absolute; width: 100%; height: 100%; opacity: 0; background: #fff; transition: opacity 0.5s ease-in-out; } .content:hover .static-content { opacity: 0; } .content:hover .hover-content { opacity: 1; } </style> </head> <body> <div class="content"> <div class="static-content"> 这是static-content </div> <div class="hover-content"> 这是hover-content </div> </div> </body> </html>这是初始状态 鼠标移动上去呈现效果
