CSS悬停不起作用，在bootstrap模态覆盖内

Question

我正在制作一个模态视图，使用bootstrap框架，如图所示，这些是两个按钮，我想悬停效果时，鼠标指向，使用CSS但它不起作用，

#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;
	text-transform: uppercase;
}

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

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

enter image description here

Answer 1

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

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;
	text-transform: uppercase;
}

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

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

Answer 3

纠正的选择器中出现错误：

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

#yesbut / #yesno和:hover之间没有空格。

空间意味着您要定位特定元素内的元素，例如#yesbut的孩子。