HTML鼠标悬停到表格某图片后,增加边框效果
时间: 2023-12-10 20:40:03 浏览: 128
bootstrap3.0教程之多种表格效果(条纹状表格、条纹状表格、鼠标悬停等)
可以使用CSS的:hover伪类来实现鼠标悬停到表格某图片后增加边框效果。具体实现方法如下:
1. 首先给表格中的图片添加一个class,例如border-img。
2. 在CSS中添加以下代码:
```
.border-img:hover {
border: 2px solid red; /* 设置需要的边框样式 */
}
```
3. 当鼠标悬停到表格中的图片时,就会出现2像素的红色边框。
完整的代码示例如下:
HTML代码:
```
<table>
<tr>
<td><img src="image1.jpg" class="border-img"></td>
<td><img src="image2.jpg" class="border-img"></td>
</tr>
</table>
```
CSS代码:
```
.border-img:hover {
border: 2px solid red;
}
```
阅读全文