JQ實現效果:焦點選中樣式

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>



發佈了46 篇原創文章 · 獲贊 20 · 訪問量 11萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章