CSS可以實現很多炫酷的效果，如何在鼠標懸停時出現搜索框呢？下面就為大家介紹一下。

<style>
.search-box{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 300px;
height: 40px;
line-height: 40px;
padding: 0 10px;
background-color: #fff;
border-radius: 20px;
box-shadow: 0 0 10px rgba(0,0,0,0.3);
z-index: 999;
visibility: hidden;
opacity: 0;
transition: all 0.3s ease;
}
.search-icon{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 30px;
height: 30px;
background: url(search.png) no-repeat center center/cover;
cursor: pointer;
}
.search-icon:hover + .search-box{
visibility: visible;
opacity: 1;
}
</style>

首先，創建一個包含搜索框和搜索圖標的父容器，并為搜索框和圖標設置樣式。

使用CSS的“+”選擇器，當鼠標懸停在搜索圖標上時，顯示搜索框。

以上就是鼠標懸停出現搜索框的實現方法，您可以根據需要對樣式進行調整。