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; 
 
}