2017-05-01 241 views
1

我正在尝试做CSS中最基本的事情之一。我的一个按钮悬停状态,但由于某种原因,它没有做任何事情!这是怎么回事?悬停状态不起作用CSS

任务信息

<label>Your Note:</label><br/> 
     <input type="text" id="noteTitle" placeholder="Note Title..."><br/> 
     <textarea id="note" placeholder="Add Content..."></textarea> <br/> 
     <button onclick="createNote()" class="btnStyle">Create Task</button> 



<br/> <br/> 
<label>Note Id:</label><br/> 
    <input type="text" id="noteId" placeholder="Type Note Id..."> <br/> 
<div class="align"><button onclick="deleteNote()" class="btnStyle">Delete Task</button></div> 

    <div id="noteTitlesId"></div> 

     <div class="align"><button onclick="getNoteTitles()" class="btnStyle">Get Task Titles</button></div> 
     <div class="align"> <button onclick="updateNote()" class="btnStyle">Update note</button></div> 

     </div> 

我为它CSS:

.btnStyle { 
    border: 0.5px solid gray; 
    border-radius: 5px; 
    background-color: transparent; 
} 



.btnStyle :hover { 
    background-color: #eb9356; 
    color: #ffff; 
} 
+4

放下空间..'.btnStyle:hover' –

+0

简直难以置信。不能相信我错过了这一点。你是一个拯救生命的人。 – Catalina

+1

所以你确切地知道你做了什么,留下一个空间,然后选择器。将第二个选择器变成''的后裔。有效的是,当被告“btnStyle”被徘徊时,将这种风格应用于后代。 –

回答

0

不要给空间之间.btnStyle:悬停删除一个空间和代码为低于:

.btnStyle:hover { 
}