当前位置：首页 → 问答吧 → 鼠标移上去时，整个背景变色

鼠标移上去时，整个背景变色

时间：2010-08-31

来源：互联网

一个div里面，有一图片，图片距离边距是15px，现在我想实现当鼠标移过去时，整个背景和边框都变色。
谁能告诉我怎么写代码？谢谢。

作者: aftertaste 发布时间: 2010-08-31

我在线等！

作者: aftertaste 发布时间: 2010-08-31

复制内容到剪贴板

代码:

#nmsc .nel{width:620px;margin:10px 0 10px 10px;overflow:hidden;}
#nmsc .nel ul{display:inline;float:left; overflow:hidden;width:630px;}
#nmsc .nel li{float:left;width:177px;margin-right:10px;margin-bottom:10px;padding:10px;text-align:center;height:136px;background-color:#f6f6f6;border:#ccc 1px solid;}
#nmsc .nel li .outer{display:block;background:#CCCCD4; }
#nmsc .nel li .outer a{display:block;background: #F3F9D7; border:1px solid #CCCCD4; text-decoration:none;}
#nmsc .nel li .outer a:hover{background: #F3F9D7; border:1px solid #ff0000; text-decoration:none;}
#nmsc .nel li img{padding:1px;border:#ccc 1px solid;}
<div id="nmsc">
<div class="nel">
   <ul>
                        <li class="outer"><a href="/company/showdetail/1196" target="_blank"><img src="/images/aaa.jpg" width="170" height="120" /></a>
                           <p><a href="/sw/company/showdetail/1196" target="_blank">银鱼</a></p>
                        </li>
< /ul>
</div>
</div>

作者: aftertaste 发布时间: 2010-08-31

不知道这样可不可以

<!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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>银鱼</title> <style type="text/css"> #nmsc .nel{width:620px;margin:10px 0 10px 10px;overflow:hidden;} #nmsc .nel ul{display:inline;float:left; overflow:hidden;width:630px;} #nmsc .nel li{float:left;width:177px;margin-right:10px;margin-bottom:10px;padding:10px;text-align:center;height:136px;border:#ccc 1px solid;} .outer{display:block;background:#CCCCD4; } .outer a{display:block;background: #F3F9D7; border:1px solid #CCCCD4; text-decoration:none;} .outer a:hover{background: #F3F9D7; border:1px solid #ff0000; text-decoration:none;} .outer img{padding:1px;border:#ccc 1px solid;} .on{display:block;background:green; } .on a{display:block;background: #F3F9D7; border:1px solid #CCCCD4; text-decoration:none;} .on a:hover{background: #F3F9D7; border:1px solid #ff0000; text-decoration:none;} .on img{padding:1px;border:red 1px solid;} </style> </head> <body> <div id="nmsc"> <div class="nel"> <ul> <li class="outer" onmouseover="changeStyle(this);" onmouseout="changeStyle(this);"> <a href="/company/showdetail/1196" target="_blank"><img src="/images/aaa.jpg" width="170" height="120" /></a> <p><a href="/sw/company/showdetail/1196" target="_blank">银鱼</a></p> </li> </ul> </div> </div> <script type="text/javascript"> function changeStyle(obj) { cName = obj.className; if(cName=="outer") obj.className="on"; else obj.className="outer"; } </script> </body> </html>
提示：您可以先修改部分代码再运行

作者: saturne 发布时间: 2010-08-31

我现在做法一般是用:hover来解决，针对IE6用hack。很多这样的情况我基本无视IE6

作者: xiangzhenhua 发布时间: 2010-09-01

谢谢谢谢~~~~
让我怎么感谢你们好呢！
先谢过再去慢慢查我哪做的不对！
哈哈

作者: aftertaste 发布时间: 2010-09-01

一定要用到java才能做到吗？
一定要用到java才能做到吗？
存CSS的引用不行的吗？谁有试过？

作者: aftertaste 发布时间: 2010-09-01

一般我这样定义 IE6也正常

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>银鱼</title> <style type="text/css"> .nel{width:620px;margin:10px 0 10px 10px;overflow:hidden;} .nel ul{display:inline;float:left; overflow:hidden;width:630px;} .nel li{float:left;width:180px;margin-right:10px;margin-bottom:10px;text-align:center;height:170px;border:#ccc 1px solid; list-style:none; line-height:18px;} .nel li img{ padding:5px; border:none;} .nel li a:link,.nel li a:visited,.nel li a:hover{ display:block; height:100%; width:100%;} .nel li a:hover{background:#256bca; color:#fff;} </style> </head> <body> <div id="nmsc"> <div class="nel"> <ul> <li><a href="#" ><img src="images/photo1.jpg" alt="新闻图片1" title="新闻图片1" width="170" height="120" /> <p>说明</p> </a></li> </ul> </div> </div> </body> </html>
提示：您可以先修改部分代码再运行

作者: fang004 发布时间: 2010-09-01

鲜花！鼓掌！

作者: aftertaste 发布时间: 2010-09-01

<a>之中不要套用<p>元素 - -!

作者: 14px 发布时间: 2010-09-02

看来楼上的有更好的解决方法

作者: webbise 发布时间: 2010-09-03

=。= 你把p改为span嘛。
或者用js吖，或者直接放弃ie6这破玩意儿吖，一点效果没多大损失。

作者: 14px 发布时间: 2010-09-03

没注意过这个问题，谢谢提醒

作者: fang004 发布时间: 2010-09-03