首页 新闻 搜索 专区 学院

我怎么让鼠标放到大的div中时边框变颜色的同时,图标也改变呢?

0
悬赏园豆:10 [已解决问题] 解决于 2016-09-01 15:39
<!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;}
  .ptes{width:115px;height:30px;}
  .tbox1{width:150px;height:30px;border:1px solid red; margin:10px 10px;}
  .pb{width:30px;height:30px;background-color:#eee;vertical-align:middle;background: url(re_code2.png) no-repeat #EEE 8px 8px;background-size: 15px;}
  .pb1{width:30px;height:30px;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'">
           <div class="pb" style="float: left;" onmouseout="this.className='pb'"  onmousemove="this.className='pb1'">
            
           </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>
问题补充:

就是鼠标放到大div中时更换里面小div背景图标;就是两个图标,默认一个,输入时一个。


1.鼠标放到大框上时边框变为红色,图标没有更换背景。

2.鼠标放到图标上大框变色,图标变色,怎么让鼠标放到大框任意地方里面的图标变色。

yangzailu的主页 yangzailu | 初学一级 | 园豆:12
提问于:2016-09-01 14:25
< >
分享
最佳答案
0

js 就可以了

收获园豆:10
crazyff | 菜鸟二级 |园豆:214 | 2016-09-01 14:41

这样就可以了

<!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>

crazyff | 园豆:214 (菜鸟二级) | 2016-09-01 14:48

如果可以请给分哦。

crazyff | 园豆:214 (菜鸟二级) | 2016-09-01 14:49

@crazyff: 爱死你了

yangzailu | 园豆:12 (初学一级) | 2016-09-01 15:38
其他回答(4)
0

mouseHover

小粽子饱饱 | 园豆:251 (菜鸟二级) | 2016-09-01 14:29

上面写着呢 你根本就没看代码

支持(0) 反对(0) yangzailu | 园豆:12 (初学一级) | 2016-09-01 14:31
0

鼠标的图标其实就是鼠标状态吧,css也可以设置,但对图片格式有要求。

顾晓北 | 园豆:10792 (专家六级) | 2016-09-01 14:31
0

链接的hover属性试试看。

坤坤 | 园豆:919 (小虾三级) | 2016-09-01 14:37
0

可以用css样式来写出效果,也可以用鼠标移入触发事件onmouseover来实现

安得浮生半日闲 | 园豆:282 (菜鸟二级) | 2016-09-01 14:38

我现在用的就是onmouseover,但布局是一个大的div包含两个小div,怎么怎么让鼠标放到大框任意地方里面的图标变色?

支持(0) 反对(0) yangzailu | 园豆:12 (初学一级) | 2016-09-01 14:39

@yangzailu: 把onmouseover这个事件给大的div就可以了

支持(0) 反对(0) 安得浮生半日闲 | 园豆:282 (菜鸟二级) | 2016-09-01 14:53

@旧城故人: 我已经给了 大的div边框可以 里面的不可以 请认真看代码呢

支持(0) 反对(0) yangzailu | 园豆:12 (初学一级) | 2016-09-01 15:37

@yangzailu: 获取大div里面的小div,然后在大div的onmouseover事件中添加:div1.style.borderColor = '颜色',(假设变量名为div1)

支持(0) 反对(0) 安得浮生半日闲 | 园豆:282 (菜鸟二级) | 2016-09-01 15:42
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册