HTML做一个图片侧边栏,鼠标悬停变色,有上下两个模块,间距2px
时间: 2023-05-20 19:06:45 浏览: 69
可以使用CSS实现这个效果,以下是一个简单的示例代码:
HTML部分:
```
<div class="image-sidebar">
<div class="image-container">
<img src="your-image-url" alt="your-image-description">
</div>
<div class="sidebar-content">
<p>Your sidebar content here</p>
</div>
</div>
```
CSS部分:
```
.image-sidebar {
display: flex;
align-items: center;
margin-bottom: 2px;
}
.image-container {
width: 100px; /* adjust the width to fit your image */
height: 100px; /* adjust the height to fit your image */
margin-right: 10px; /* adjust the margin to create space between the image and the sidebar content */
}
.image-container img {
width: 100%;
height: 100%;
object-fit: cover;
}
.sidebar-content {
flex: 1;
background-color: #f2f2f2; /* adjust the background color to your liking */
padding: 10px;
}
.sidebar-content:hover {
background-color: #d9d9d9; /* adjust the hover background color to your liking */
}
```
这个代码会创建一个图片侧边栏,图片和侧边栏内容之间有10px的间距,鼠标悬停时侧边栏内容的背景色会变成灰色。你可以根据需要调整CSS样式来适应你的需求。