首页怎么使用css使html中的图片和文字在鼠标悬浮时同时变换

怎么使用css使html中的图片和文字在鼠标悬浮时同时变换

时间: 2024-09-18 20:18:31 浏览: 125

在HTML中使用CSS来让图片和文字在鼠标悬停时同时发生变化，可以利用CSS的`:hover`伪类选择器。下面是一个简单的例子： ```html <!DOCTYPE html> <html lang="zh"> <head> <style> .container { position: relative; } .image-text-container { display: inline-block; } .image { width: 100px; /* 图片宽度 */ height: 100px; /* 图片高度 */ transition: transform 0.3s ease; /* 添加过渡效果，使变化平滑 */ } .text { margin-left: 15px; /* 文字位置 */ transition: color 0.3s ease; /* 颜色变化 */ } .image-text-container:hover .image { transform: scale(1.1); /* 图片放大 */ } .image-text-container:hover .text { color: red; /* 文字变色 */ } </style> </head> <body> <div class="container"> <div class="image-text-container"> <img src="your-image-url" alt="图片描述" class="image"> <p class="text">悬停查看效果</p> </div> </div> </body> </html> ``` 在这个示例中，当鼠标悬停在包含图片和文字的`.image-text-container`上时，图片会放大(`transform: scale(1.1)`)，文字颜色变为红色(`color: red`)。`transition`属性用于添加动画效果，使得转换过程更流畅。

阅读全文