仿苏宁易购鼠标点击搜索框提示信息

最新推荐文章于 2023-01-02 09:40:57 发布

webshitian

最新推荐文章于 2023-01-02 09:40:57 发布

阅读量365

点赞数 1

分类专栏： web前端开发 js

本文链接：https://blog.csdn.net/qq_42943107/article/details/98090072

版权

web前端开发同时被 2 个专栏收录

20 篇文章 1 订阅

订阅专栏

8 篇文章 0 订阅

订阅专栏

我们先看一下苏宁易购搜索框部分的效果：
鼠标没有点击搜索框时显示的效果：
在这里插入图片描述
鼠标点击搜索框后的效果：
我们先看一下运行的效果,这里不会做出与苏宁一模一样的，只是实现一下苏宁搜索框这种效果的逻辑。
运行代码显示效果。

鼠标点击搜索框的时候，显示出提示盒子也就是提示的信息
在这里插入图片描述

当你的鼠标移出搜索框外面的时候，盒子就会隐藏起来
在这里插入图片描述
下面直接上代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			/*给搜索框设置样式*/
			.search{
				position: relative;
			}
			/*给盒子设置样式*/
			#searchTip{
				width: 500px;
				height: 300px;
				border:1px solid #f90;
				position: absolute;
				display: none;
			}
		</style>
	</head>
	<body>
		<div class="search">
			<input id="searchInput" type="text" placeholder="获取，失去焦点触发" />
			<div id="searchTip">
				搜索提示盒子
			</div>
		</div>
		<script>
			//获取焦点  onfocus
			//失去焦点  onblur
			
			//1.获取元素
			var searchInput = document.getElementById('searchInput');
			var searchTip = document.getElementById('searchTip');
			//2.获取焦点
			searchInput.onfocus = function(){
				//显示盒子
				searchTip.style.display = 'block';
			}
			//3.失去焦点
			searchInput.onblur = function(){
				//隐藏盒子
				searchTip.style.display = 'none';
			}
		</script>
	</body>
</html>