CSS點擊事件圖片消失
img { display: block; margin: 0 auto; } img:hover { opacity: 0.5; cursor: pointer; } img:active { display: none; }
實現方法:
1. 首先,在HTML中添加圖片標簽<img>
<img src="picture.jpg">
2. 在CSS中添加樣式:
img { display: block; // 將圖片設置為塊狀元素 margin: 0 auto; // 水平居中 } img:hover { opacity: 0.5; // 鼠標懸停時設置透明度為0.5 cursor: pointer; // 鼠標懸停時顯示手型 } img:active { display: none; // 點擊圖片時設置display屬性為none,隱藏圖片 }
3. 最終效果: