CSS hover не работает, внутри модального наложения bootstrap

Question

Я делаю модальный вид, используя фреймворк bootstrap, как показано на рисунке, это две кнопки, я хочу эффект зависания, когда мышь указывает, используя CSS, но это isn «т рабочий,

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