JS(JavaScript)和CSS(Cascading Style Sheets)是Web開發(fā)中最重要的兩個(gè)部分,JS主要用于網(wǎng)頁的動(dòng)態(tài)交互和數(shù)據(jù)處理,CSS用于控制網(wǎng)頁頁面的樣式和風(fēng)格。把它們結(jié)合起來,可以讓網(wǎng)頁更加出彩,為用戶提供更好的體驗(yàn)。
下面我們來看一段JS和CSS的組合代碼,它可以讓網(wǎng)頁中的按鈕在鼠標(biāo)懸停時(shí)改變顏色:
.button { background-color: #008CBA; border: none; color: white; padding: 15px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin: 4px 2px; transition-duration: 0.4s; cursor: pointer; } .button:hover { background-color: #f44336; color: white; }
該代碼首先定義了一個(gè)“button”類,包含了按鈕的基本樣式。接著,使用“transition-duration”屬性指定了顏色變化需要的時(shí)間,“cursor”屬性指定了鼠標(biāo)在按鈕上的樣式。
最后,使用“:hover”偽類定義了鼠標(biāo)懸停時(shí)的顏色變化效果。在這里,我們將背景色和字體顏色都改為了紅色。
將JS和CSS結(jié)合起來,可以實(shí)現(xiàn)更加復(fù)雜的效果,讓網(wǎng)頁更加生動(dòng)、多彩。