JQ实现效果：焦点选中样式

最新推荐文章于 2024-10-09 17:21:39 发布

鱼儿跳

最新推荐文章于 2024-10-09 17:21:39 发布

阅读量770

点赞数

分类专栏： JQ 文章标签： jquery 焦点

本文链接：https://blog.csdn.net/xin9910/article/details/75285455

版权

JQ 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

1、伪类：focus

<!DOCTYPE html>
<html>
<head>
	<title>Char 5</title>
	<meta charset="utf-8"/>
	<style type="text/css">
	input:focus{
		border-color: red;
	}
		/*.focus{
			border-color: red;
		}*/
	</style>
	<script type="text/javascript" src="jquery.js"></script>
	<script type="text/javascript">
		// $(function(){
		// 	$(":input").focus(function() {
		// 		$(this).addClass('focus');
		// 	}).blur(function(event) {
		// 		$(this).removeClass('focus');
		// 	});
		// })
	</script>
</head>
<body>
	<div class="person">
		<p>姓名：<input type="text" name="name"></p>
		<p>密码：<input type="password" name="password"></p>
		<p>详细信息：<input type="textarea" name="textarea"></p>
	</div>
</body>
</html>

2、ie6只支持:hover.使用jq实现相同效果

<!DOCTYPE html>
<html>
<head>
	<title>Char 5</title>
	<meta charset="utf-8"/>
	<style type="text/css">
		.focus{
			border-color: red;
		}
	</style>
	<script type="text/javascript" src="jquery.js"></script>
	<script type="text/javascript">
		$(function(){
			$(":input").focus(function() {
				$(this).addClass('focus');
			}).blur(function(event) {
				$(this).removeClass('focus');
			});
		})
	</script>
</head>
<body>
	<div class="person">
		<p>姓名：<input type="text" name="name"></p>
		<p>密码：<input type="password" name="password"></p>
		<p>详细信息：<input type="textarea" name="textarea"></p>
	</div>
</body>
</html>