本文目錄導讀：

1. HTML結構準備
2. CSS樣式設置
3. 完整效果展示與測試

利用CSS實現(xiàn)鼠標點擊顯示與隱藏div元素的功能

在網(wǎng)頁設計中，我們經(jīng)常需要實現(xiàn)某些元素在用戶交互時顯示或隱藏，本文將介紹如何使用CSS實現(xiàn)鼠標點擊時顯示div元素，不點擊則隱藏的效果。

HTML結構準備

我們需要在頁面中創(chuàng)建一個基本的HTML結構，這通常包括一個按鈕或一個可點擊的元素，以及一個需要顯示或隱藏的div元素。

<button id="toggleButton">點擊顯示/隱藏</button>
<div id="hiddenDiv" class="hidden">這是需要隱藏的內(nèi)容。</div>

CSS樣式設置

通過CSS設置初始狀態(tài)，讓div默認是隱藏的，為按鈕添加樣式并指定交互功能。

/* 默認隱藏div */
.hidden {
    display: none; /* 設置初始狀態(tài)為隱藏 */
}
/* 按鈕樣式 */
#toggleButton {
    padding: 10px 20px;
    background-color: #4CAF50; /* 綠色背景 */
    border: none; /* 無邊框 */
    color: white; /* 文字顏色 */
    cursor: pointer; /* 鼠標懸停時的手形圖標 */
}

三. JavaScript交互邏輯實現(xiàn)

為了實現(xiàn)點擊按鈕顯示或隱藏div的功能，我們需要借助JavaScript來監(jiān)聽按鈕的點擊事件，并通過改變CSS的display屬性來實現(xiàn)顯示和隱藏的切換。

document.getElementById('toggleButton').addEventListener('click', function() {
    var hiddenDiv = document.getElementById('hiddenDiv');
    if (hiddenDiv.style.display === 'none') {
        hiddenDiv.style.display = 'block'; // 顯示div元素
    } else {
        hiddenDiv.style.display = 'none'; // 隱藏div元素
    }
});

完整效果展示與測試

將上述HTML、CSS和JavaScript代碼整合在一起，在瀏覽器中打開頁面進行測試，當點擊按鈕時，之前隱藏的div元素應該能夠顯示出來；再次點擊按鈕時，div元素則隱藏，通過這種方式，我們可以利用CSS和JavaScript輕松實現(xiàn)鼠標交互下的顯示與隱藏功能，在實際項目中可以根據(jù)需求調(diào)整樣式和交互邏輯。