CSS文本输入框悬停

Question

我用HTML创建了一个文本输入框。我已经添加了CSS来更改框，所以当用户将鼠标悬停在它上面时，阴影会改变，但是当我在浏览器中尝试它时，当我将鼠标悬停在框上时没有任何改变。

.searchBar {
    position: absolute;
    top: 307px;
    right: 392.5px;
    width: 500px;
    border-radius: 0px;
    border: 1px solid #f3efee;
    height:40px;
    box-shadow: 0px 1px #f3efee;
}

.searchbar:focus {
    box-shadow: 10px 10px red;
}

Answer 1

当将鼠标悬停在.searchBar元素上时，此伪类应该有效：

.searchBar:hover {
    box-shadow: 10px 10px red;
}

Answer 2

请注意：焦点和：悬停是不同的属性。

Answer 3

将.searchbar:focus更改为.searchBar:focus您的班级名称.searchBar的大写字母为B.

。

＆＃13;

＆＃13;

.searchBar {
    width: 500px;
    border-radius: 0px;
    border: 1px solid #f3efee;
    height:40px;
    box-shadow: 0px 1px #f3efee;
}

.searchBar:focus {
    box-shadow: 10px 10px red;
}

＆＃13;

<div style="background: yellow; padding: 30px">
<input type="text" class="searchBar" />
</div>

＆＃13;

＆＃13;

＆＃13;