所以我的問題，正如我已經說過的，是我在懸停按鈕時看不到懸停的動作
。以下是我的按鈕的HTML版本
< button class="btn">button</button>
這里是我的scss代碼，用于懸停
.btn{
background-color: $secondColor;
font-variant-caps: all-petite-caps;
border-radius: 2px;
:hover{
背景色：水藍色。
}
這里是在'sass watcher'之后的css代碼，使其成為css
。.btn {
background-color: #e5383b;
font-variant-caps: all-petite-caps;
border-radius: 2px;
}
.btn :hover {
背景色：水藍色。
}
下面是一張顯示結果的圖片
（你看不到我的滑鼠，但我把它懸停了）
uj5u.com熱心網友回復：
在你的懸停處放一個'&'
.btn {
background-color: $secondColor;
font-variant-caps: all-petite-caps;
border-radius: 2px;
& :hover {
background-color: aqua;
}
}
uj5u.com熱心網友回復：
你需要洗掉.btn :hover {上的空格。選擇器之間的空格表示嵌套的元素，所以.a .b {將樣式化一個嵌套在a中的b標簽。
為了做到這一點，你可以在嵌套時為懸停狀態添加一個安培號，就像這樣。
.btn {
background-color: $secondColor;
font-variant-caps: all-petite-caps;
border-radius: 2px;
&:hover {
background-color: aqua;
}
安培爾表示你應該把父元素拿過來，并在這里替換。因此，scss將采取.btn并與:hover鏈接，你將得到你預期的結果。
uj5u.com熱心網友回復：
對于SCSS來說，如果你是嵌套的，并且想使用偽類或元素，你需要在任何偽類或偽元素之前放入&
SCSS：
.class {
margin: 0;
padding: 0;
&:hover { // 注意在偽類 "hover "前使用"&"。
背景色：紅色。
}
}
這將導致
.class {
margin: 0;
padding: 0;
}
.class:hover {
背景色：紅色。
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/320714.html
標籤：
上一篇：提交按鈕會重新加載頁面