CSS 鼠標點擊展開效果是網站設計中很實用的一種效果，可以為網站的互動性增加不少樂趣。下面就來介紹一下如何實現這種效果。

首先，在 HTML 中要創建一個觸發展開的元素，比如按鈕或鏈接。

<button id="expandBtn">展開</button>

接著，在 CSS 中設置一個初始狀態的樣式。這個樣式可以設置元素的高度為 0，同時隱藏元素的溢出內容。

#expandContent {
height: 0;
overflow: hidden;
transition: height 0.3s ease-in-out;
}

這里使用了過渡效果來平滑展開和收起元素，在鼠標點擊觸發元素時，通過 JavaScript 來切換元素的高度。

var expandBtn = document.getElementById('expandBtn');
var expandContent = document.getElementById('expandContent');
expandBtn.addEventListener('click', function() {
if (expandContent.style.height) {
expandContent.style.height = '';
} else {
expandContent.style.height = expandContent.scrollHeight + 'px';
}
});

在 JavaScript 中，首先獲取觸發元素和要展開的內容元素，然后監聽觸發元素的點擊事件。在點擊事件中，判斷要展開的內容元素的高度是否存在，如果存在則將高度設置為空，即收起元素，否則將高度設置為元素實際的滾動高度，即展開元素。

通過上述代碼，就可以實現一個簡單的鼠標點擊展開效果。需要注意的是，如果要展開的內容元素中有圖片等資源，需要考慮加載時間過長的問題，可以采用圖片懶加載等技術來優化。