主站经典论坛家园作品集 Think.Pages 维基桌面聚合

经典论坛 » WEB标准化专栏 » css怎么做到：鼠标划过，图片样色变换

打印

[求助] css怎么做到：鼠标划过，图片样色变换

lujingtao [楼主]

新手上路

帖子: 17
体力: 45
威望: 0
当前: 广东广州
离线: 18 天

1^# 大中小发表于 2008-8-22 10:55

css怎么做到：鼠标划过，图片样色变换？

<style type='text/css'>
.img{border:1px;}
.div{}
.div img:hover{border:10px;}/*这样不行啊！*/
</style>

<div class='div'>
<img src="" class='img'/>
</div>

TOP

做西部数码代理.Cn1元国际45元 | 微软开发者工具互动网站

adam1985

初级会员

帖子: 30
体力: 68
威望: 0
当前: 广东深圳
离线: 23 天

专长 网页设计,UI,平面

2^# 大中小发表于 2008-8-22 11:01

你是在ie6下预览的吗，要是ie6的话拿就没有办法了ie6只有a标签才能使用hover伪类，其他的标签使用hover不起作用，你可以用a标签实现，你把下面例子中的背景颜色换成背景图像就可以了

<!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>nav01</title>
<style type="text/css">
* {
	margin:0;
	padding:0;
}
body {
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:11px;
	background:#666;
}
#nav {
	margin:100px;
	list-style:none;
}
#nav li {
	float:left;
}
#nav li a {
	padding:10px 20px;
	background:#000;
	color:#fff;
	text-decoration:none;
	text-transform:capitalize;
	display:block;
}
#nav li a:hover{
	color:#000;
	background:#ccc;
	border:1px solid #000;
}
</style>
</head>
<body>
<ul id="nav">
  <li><a href="#">home</a></li>
  <li><a href="#">about</a></li>
  <li><a href="#">news</a></li>
  <li><a href="#">products</a></li>
  <li><a href="#">services</a></li>
  <li><a href="#">clients</a></li>
  <li><a href="#">blog</a></li>
  <li><a href="#">link</a></li>
</ul>
</body>
</html>

提示：您可以先修改部分代码再运行

TOP

美橙vps独立IP月付189元 | 千千静听皮肤设计大赛

ONEBOYS

步舞之鹤

银牌会员

帖子: 522
体力: 1034
威望: 0
当前: 浙江杭州

专长 前端制作

3^# 大中小发表于 2008-8-22 11:01

?图片变色？那换图咯

TOP

activeTechPros 共享IT行业薪资信息 | 《疯狂的程序员》劲爆上市

ONEBOYS

步舞之鹤

银牌会员

帖子: 522
体力: 1034
威望: 0
当前: 浙江杭州

专长 前端制作

4^# 大中小发表于 2008-8-22 11:02

用a的背景

TOP

还在为头像烦恼?还在为不能关注好友动态烦忧?快来蓝色理想家园吧!

lujingtao [楼主]

新手上路

帖子: 17
体力: 45
威望: 0
当前: 广东广州
离线: 18 天

5^# 大中小发表于 2008-8-22 11:12

明白了，谢谢啊
不过这就麻烦点
还是用js算了
onMouserOver="this.className='XX'"

TOP

ikoo

新手上路

帖子: 8
体力: 13
威望: 0
当前: 浙江台州
离线: 44 天

6^# 大中小发表于 2008-8-22 11:29

楼主是不是要一个这样的效果！！

TOP

aoliy1982

新手上路

帖子: 2
体力: 9
威望: 0
当前: 江苏苏州
离线: 98 天

7^# 大中小发表于 2008-8-22 13:16

onMouserOver
干麻多打个r ?

TOP

lujingtao [楼主]

新手上路

帖子: 17
体力: 45
威望: 0
当前: 广东广州
离线: 18 天

8^# 大中小发表于 2008-8-22 13:21

楼上的正解啊！！
thanks very much！

TOP

lujingtao [楼主]

新手上路

帖子: 17
体力: 45
威望: 0
当前: 广东广州
离线: 18 天

9^# 大中小发表于 2008-8-22 13:22

我说的是：六楼正解！

TOP

‹‹ 上一主题 | 下一主题 ››