DIV+CSS实现alt属性效果

最新推荐文章于 2023-06-09 05:30:00 发布

原创最新推荐文章于 2023-06-09 05:30:00 发布 · 5k 阅读

·

0

·

CC 4.0 BY-SA版权

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

文章标签：

#div #css #input #javascript #border #action

综合专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一种使用JavaScript和HTML实现鼠标悬停提示效果的方法。通过简单的代码实现了输入框上显示提示信息的功能，并添加了阴影效果增强用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

<title>鼠标提示</title>

<script language="JavaScript">

function seashowtip(tips,flag,iwidth){

var my_tips=document.all.mytips;

if(flag){

my_tips.innerHTML=tips;

my_tips.style.display="";

my_tips.style.width=iwidth;

my_tips.style.left=event.clientX+10+document.body.scrollLeft;

my_tips.style.top=event.clientY+10+document.body.scrollTop;

}

else

{

my_tips.style.display="none";

}

}

</script>

<style>

body{font-size:12px}

</style>

<div id=mytips style="position:absolute;background-color:#ffffff;width:121;height:16;border:1px solid gray;display:none;filter: progid:DXImageTransform.Microsoft.Shadow(color=#999999,direction=135,strength=3); left:0; top:5"></div>

</head>

<body>

<form name="form1" method="post" action="">

用户名：

<input type="text" name="textfield" tips="*** 输入用户名." onmousemove=seashowtip(this.tips,1,150) onmouseout=seashowtip(this.tips,0,150)>

<br/>

密  码：

<input type="text" name="textfield2" tips="*** 输入密码." onmousemove=seashowtip(this.tips,1,150) onmouseout=seashowtip(this.tips,0,150)>

<br/>

验证码：

<input type="text" name="textfield3" tips="*** 输入验证码." onmousemove=seashowtip(this.tips,1,150) onmouseout=seashowtip(this.tips,0,150)>

<input type="submit" name="Submit" value="提交">

</form>

</body>

</html>

代码较为简单，不作解释。注意DIV里用到了滤镜里的shadow属性，有阴影效果

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。