css3鼠标滑动展开 |css怎样滑动换图片

/* 定义默认状态下的按钮样式 */ 
.button { 
width: 200px; 
height: 50px; 
background-color: #008CBA; 
color: #fff; 
text-align: center; 
line-height: 50px; 
border-radius: 25px; 
cursor: pointer; 
overflow: hidden; 
} 
/* 定义按钮被悬停时的效果 */ 
.button:hover { 
width: 300px; 
transition: width 0.5s ease-in-out; 
} 
/* 定义展开内容的样式 */ 
.content { 
opacity: 0; 
width: 100%; 
height: 0; 
background-color: #008CBA; 
color: #fff; 
text-align: center; 
line-height: 50px; 
border-radius: 0 0 25px 25px; 
transition: opacity 0.5s ease-in-out, height 0.5s ease-in-out; 
} 
/* 定义被悬停时展开内容的效果 */ 
.button:hover .content { 
height: 50px; 
opacity: 1; 
}

通过上述代码，大家可以实现一个按钮，当鼠标悬停时，展开相应的内容，给用户更好的页面体验。在实际项目开发中，大家可以结合ajax等技术，实现更为复杂的交互效果。