JS效果——鼠标(焦点)移入时为空，移开时变为默认值

最新推荐文章于 2022-03-03 00:43:10 发布

Lsevens.

最新推荐文章于 2022-03-03 00:43:10 发布

阅读量305

点赞数

分类专栏： js 文章标签： html js

本文链接：https://blog.csdn.net/m0_51074727/article/details/109109162

版权

这篇博客介绍了如何使用JavaScript实现鼠标焦点移入元素时将其边框颜色设为蓝色，移开时恢复默认样式。通过编写js代码并结合html中的blue样式，实现了动态效果。

摘要由CSDN通过智能技术生成

1.js代码：

	<script type="text/javascript">
			$(function(){
			$(".txt_name").mouseover(function(){
					$(this).addClass("blue").val("");
			}).mouseout(function(){
			        $(this).removeClass();
				if($(".txt_name").val()==null){
						$(this).val("输入手机号码或者邮箱");
					}
			})
			
			$(".txt_pwd").mouseover(function(){
					$(this).addClass("blue").val("");
			}).mouseout(function(){
			$(this).removeClass();
				if($(".txt_name").val()==null){
						$(this).val("输入密码");
					}
			})
			
			$(".txt_yzm").mouseover(function(){
					$(this).addClass("blue").val("");
			}).mouseout(function(){
			$(this).removeClass();
				if($(".txt_yzm").val()==null){
						$(this).val("输入验证码");
					}
			}
			)
			
			})

				
		
		</script>

2.html设置一个 blue样式：

<sty