CSS懸停不工作，在引導模式覆蓋

Question

我正在做一個模式的視圖，使用引導框架，如圖所示，這些是兩個按鈕，我想懸停效果時，鼠標指向，使用CSS，但它不是「T工作，

#yesbut,#nobut { 
 
    width: auto; 
 
    height: auto; 
 
    display: inline-block; 
 
    padding: 10px 35px; 
 
    text-align: center; 
 
    background: #2e6c96; 
 
    color: #fff; 
 
    font-size: 16px; 
 
    text-decoration: none; 
 
    border: 1px solid #2e6c96; 
 
    outline: none; 
 
\t text-transform: uppercase; 
 
} 
 

 
#yesbut :hover{ 
 
\t background: #fff; 
 
\t border: 1px solid #fff; 
 
} 
 
#nobut :hover{ 
 
\t background: #fff; 
 
    color: #2e6c96; 
 
\t border: 1px solid #fff; 
 
}

<div id="yesbut" >YES</div> 
 
<div id="nobut">NO</div>

enter image description here

Answer 1

你有在糾正選擇錯誤是：

#yesbut:hover{ 
    background: #fff; 
    border: 1px solid #fff; 
} 

沒有#yesbut/#yesno和:hover之間的空間。

空間意味着您將特定元素內的元素作爲目標，例如子女#yesbut。

Answer 2

您需要刪除的空間。如果您在僞類之前放置一個空格，則意味着您要選擇一個例如#yesbut而不是元素本身。

#yesbut,#nobut { 
 
    width: auto; 
 
    height: auto; 
 
    display: inline-block; 
 
    padding: 10px 35px; 
 
    text-align: center; 
 
    background: #2e6c96; 
 
    color: #fff; 
 
    font-size: 16px; 
 
    text-decoration: none; 
 
    border: 1px solid #2e6c96; 
 
    outline: none; 
 
\t text-transform: uppercase; 
 
} 
 

 
#yesbut:hover{ 
 
\t background: #fff; 
 
\t border: 1px solid #fff; 
 
} 
 
#nobut:hover{ 
 
\t background: #fff; 
 
    color: #2e6c96; 
 
\t border: 1px solid #fff; 
 
}

<div id="yesbut" >YES</div> 
 
<div id="nobut">NO</div>

Answer 3

#yesbut :hover{    /*Remove the space*/ 
 
\t background: #fff; 
 
\t border: 1px solid #fff; 
 
}