设置2行1列的表格,第一行拆分成4列,分别放入四小图,第二行默认放入一张图。当鼠标指到第一行中的某一张图片时,第二行显示它的图片。用css做
时间: 2024-03-06 20:46:14 浏览: 15
可以使用CSS中的表格布局和:hover伪类来实现这个效果。具体步骤如下:
1.在HTML中,使用<table>标签创建一个2行1列的表格。
2.在第一行中,使用<td>标签创建4个单元格,并将每个单元格内放入一张小图。
3.在第二行中,使用<td>标签创建一个单元格,并将默认图片放入其中。
4.使用CSS中的表格布局,将表格和各个单元格的宽度、高度、边框等样式设置好。
5.使用:hover伪类,当鼠标指向第一行的某个单元格时,将第二行的图片替换成该单元格内的图片。
以下是一个简单的示例代码:
HTML代码:
```html
<table>
<tr>
<td class="small-img"><img src="img1.jpg"></td>
<td class="small-img"><img src="img2.jpg"></td>
<td class="small-img"><img src="img3.jpg"></td>
<td class="small-img"><img src="img4.jpg"></td>
</tr>
<tr>
<td class="big-img"><img src="default.jpg"></td>
</tr>
</table>
```
CSS代码:
```css
table {
width: 400px;
height: 300px;
border: 1px solid #ccc;
border-collapse: collapse;
}
td {
padding: 0;
border: 1px solid #ccc;
}
.small-img {
width: 25%;
height: 150px;
text-align: center;
vertical-align: middle;
}
.small-img img {
max-width: 100%;
max-height: 100%;
}
.big-img {
height: 150px;
text-align: center;
vertical-align: middle;
}
.big-img img {
max-height: 100%;
}
.small-img:hover ~ .big-img img {
display: none;
}
.small-img:hover ~ .big-img img[src^="img"] {
display: inline-block;
}
```
当鼠标指向第一行的某个单元格时,该单元格内的图片会显示在第二行的单元格中,鼠标离开时,显示默认图片。
相关推荐
![application/x-zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)