CSS是前端開發中非常重要的一部分，可以用來實現網頁的各種效果。其中，鼠標觸發的效果也是很常用的一種。下面就來介紹一下如何使用CSS實現鼠標觸發效果。

/* 當鼠標移到按鈕上時，改變按鈕的顏色 */
.button:hover {
background-color: #3f51b5;
color: #fff;
}

這段代碼實現的效果是，當鼠標移到class為“button”的元素上時，將該元素的背景顏色改為#3f51b5，字體顏色改為白色。這種效果常用于按鈕、鏈接等元素上。

/* 當鼠標點擊元素時，顯示或隱藏另一個元素 */
.toggle-trigger {
cursor: pointer;
}
.toggle-target {
display: none;
}
.toggle-trigger:hover + .toggle-target {
display: block;
}

這段代碼實現的效果是，當鼠標點擊class為“toggle-trigger”的元素時，顯示或隱藏class為“toggle-target”的元素。當鼠標移到“toggle-trigger”上時，鼠標指針將變為手形，表示該元素可點擊。這種效果常用于折疊/展開內容、菜單等。

/* 當鼠標移過圖片時，顯示圖片說明文字 */
.image-with-caption {
position: relative;
}
.image-with-caption:hover .caption {
opacity: 1;
}
.caption {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
background-color: rgba(0, 0, 0, .7);
color: #fff;
padding: 10px;
opacity: 0;
}

這段代碼實現的效果是，當鼠標移過class為“image-with-caption”的圖片時，顯示該圖片的說明文字。這種效果常用于圖片輪播、相冊等。

以上是CSS實現鼠標觸發效果的一些示例，希望能對您有所幫助。