鼠标放在输入框上，输入框和图片同时更换样式。

最新推荐文章于 2021-06-04 12:56:49 发布

「已注销」

最新推荐文章于 2021-06-04 12:56:49 发布

阅读量168

点赞数

分类专栏：前端文章标签： html/css

原文链接：https://www.mk2048.com/blog/blog.php?id=hbbjbj0bbk2j&title=%E9%BC%A0%E6%A0%87%E6%94%BE%E5%9C%A8%E8%BE%93%E5%85%A5%E6%A1%86%E4%B8%8A%EF%BC%8C%E8%BE%93%E5%85%A5%E6%A1%86%E5%92%8C%E5%9B%BE%E7%89%87%E5%90%8C%E6%97%B6%E6%9B%B4%E6%8D%A2%E6%A0%B7%E5%BC%8F%E3%80%

版权

前端专栏收录该内容

182 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> new document </title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="" />
<style type="text/css">
.box{width:1000px;margin:0 auto;height:500px;border:1px solid green;}
.tbox{width:150px;height:30px;border:1px solid #585858; margin:10px 10px;background-color:#eee;vertical-align:middle;background: url(re_code2.png) no-repeat #EEE 8px 8px;background-size: 15px;}
.ptes{width:115px;height:30px;}
.tbox1{width:150px;height:30px;border:1px solid red; margin:10px 10px;}
.pb1:hover {background-color:#eee;vertical-align:middle;background: url(re_code1.png) no-repeat #EEE 8px 8px;background-size: 15px;}
</style>
<script type="text/javascript"></script>
</head>

<body style="background-color:#FFF;">
<div class="box">
    <div class="tbox" onmouseout="this.className='tbox'" onmousemove="this.className='tbox1 pb1'">
            <div style="float: left; width:30px; height:30px;">
            </div>
            <div class="ptes" style="float: left;">
                    <input id="password" name="password" type="password" placeholder=" 请输入密码" value="" style="width:100%;height:26px;border-style:none"/>
            </div>
    </div>
<div>
</body>
</html>

更多专业前端知识，请上【猿2048】www.mk2048.com

「已注销」

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
鼠标放在输入框上，输入框和图片同时更换样式。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtm...
复制链接

扫一扫