CSS hover not working, inside a bootstrap modal overlay - html

Question

I am making a modal view, using bootstrap framework, as shown in the figure , these are two buttons , I want hover effect when , mouse points on, using CSS but it isn't working,
#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

You got error in selectors corrected is:
#yesbut:hover{
background: #fff;
border: 1px solid #fff;
}
without space between #yesbut/#yesno and :hover.
Space mean you are targeting elements inside that particular element e.g. children of #yesbut.

Answer 3

You need to remove the spaces. If you put a space before the pseudo-class it means that you want to select a child of e.g. #yesbut instead of the element itself.
#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>