如何使用 CSS 使 Google 搜索栏像输入框一样在悬停时突出显示？

在 Web 开发中，CSS 起着非常重要的作用，其中有一项非常常用的功能就是悬停效果，也就是在鼠标悬停在某个元素上时，改变该元素的样式。

下面我们就以 Google 搜索栏为例，介绍如何使用 CSS 实现当鼠标悬停在搜索栏上时，它会变成一个类似输入框的样式。

实现思路

实现该效果主要有两个步骤：

1. 将搜索栏的边框和背景色设置为默认为透明；
2. 当鼠标悬停在搜索栏上时，改变其边框和背景色，使其看起来更像一个输入框。

代码实现步骤

1. HTML 代码

首先，需要在 HTML 中添加搜索框的代码。代码如下：

<form class="search-form" action="https://www.google.com/search" method="get">
  <input type="text" name="q" id="search-input" placeholder="Search Google">
  <button type="submit" id="search-button">Search</button>
</form>

其中，.search-form 是 form 元素的类名，#search-input 是输入框的 id，#search-button 是提交按钮的 id。

2. CSS 代码

接下来，我们就来写 CSS 代码，实现设置默认的搜索框样式，以及悬停时改变搜索框样式的效果。代码如下：

/* 设置默认样式 */
.search-form {
  display: flex;
  align-items: center;
  justify-content: center;
}

#search-input {
  border: 2px solid transparent;
  padding: 5px 10px;
  background-color: transparent;
  outline: none;
  font-size: 16px;
}

#search-button {
  border: none;
  padding: 5px 10px;
  background-color: #4285f4;
  color: #fff;
}

/* 悬停时改变样式 */
#search-input:hover {
  border-color: #4285f4;
  background-color: #f5f5f5;
}

其中，我们使用 #search-input 的 :hover 伪类选择器来实现悬停时改变样式的效果。

结论

通过以上代码实现，当我们鼠标悬停在搜索框上时，它就会出现一个类似输入框的边框和背景色，以达到更好的用户体验效果。

以上就是本篇教程的全部介绍，希望对你有所帮助！