jQuery鼠標按下變色是Web開發中常見的交互效果之一。下面我們來學習如何使用jQuery實現這樣的效果。

$(document).ready(function(){
$('.box').mousedown(function(){
$(this).css('background-color','red');
});
$('.box').mouseup(function(){
$(this).css('background-color','green');
});
});

上述代碼中，我們首先使用$(document).ready()函數來確保頁面加載完成后再執行下面的代碼。然后我們使用$('.box')來選中我們要操作的元素，這里我們假設我們要改變一個class為box的div元素的背景色。

接著我們使用mousedown()和mouseup()函數分別監聽鼠標按下和松開事件，并使用css()函數來修改元素的背景色。這里我們將鼠標按下時的背景色設為紅色，松開時設為綠色。

最后，我們可以通過給元素添加CSS樣式來定義box類的樣式，從而使其顯示更加美觀。

.box{
width:200px;
height:200px;
margin:100px auto;
background-color:green;
cursor:pointer;
}

通過以上步驟，我們就完成了一個簡單的jQuery鼠標按下變色效果。