CSS實現圖片點擊切換功能是網頁設計中常用的技巧之一。下面我們來學習一下如何使用CSS實現圖片點擊切換。
<html>
<head>
<style>
/* 設置點擊圖片的樣式 */
img {
cursor: pointer;
transition: all 0.3s;
}
img:hover {
opacity: 0.7;
}
/* 隱藏除第一張圖片外的其他圖片 */
.image:not(:first-child) {
display: none;
}
</style>
</head>
<body>
<div class="images">
<img src="image1.png" alt="image1">
<img src="image2.png" alt="image2">
<img src="image3.png" alt="image3">
</div>
/* 使用JavaScript實現圖片點擊切換 */
<script>
// 獲取所有圖片元素
var images = document.querySelectorAll('.images img');
// 給每個圖片元素添加點擊事件
for (var i = 0; i < images.length; i++) {
images[i].addEventListener('click', function() {
// 隱藏所有圖片
for (var j = 0; j < images.length; j++) {
images[j].style.display = 'none';
}
// 顯示點擊的圖片
this.style.display = 'block';
});
}
</script>
</body>
</html>首先，在CSS中設置鼠標指針樣式為手型，當鼠標懸浮在圖片上時，使用漸變效果將圖片的透明度降低。此外，對除第一張圖片外的其他圖片進行隱藏。
然后，在JavaScript中獲取所有圖片元素并遍歷添加點擊事件，當點擊某個圖片時，隱藏所有圖片并顯示點擊的圖片。
以上就是使用CSS實現圖片點擊切換功能的方法，大家可以參考一下并根據實際需求進行修改。