HTML与CSS中,如何实现<a>标签鼠标悬浮更换背景图片?我用的Dreamweaver.
我的代码并没有实现:HTML部分:<ahref="#"id="pic2"style="background-image:url(image/frontPageAd_ann...
我的代码并没有实现:
HTML部分:<a href="#" id="pic2" style="background-image:url(image/frontPageAd_anniversary_txt.jpg); background-repeat:no-repeat; width:465px; height:262px; display:block;"> </a>
CSS部分:#pic2 a:hover{ background-image:url(../image/复件 frontPageAd_anniversary_txt.jpg); background-repeat:no-repeat;} 展开
HTML部分:<a href="#" id="pic2" style="background-image:url(image/frontPageAd_anniversary_txt.jpg); background-repeat:no-repeat; width:465px; height:262px; display:block;"> </a>
CSS部分:#pic2 a:hover{ background-image:url(../image/复件 frontPageAd_anniversary_txt.jpg); background-repeat:no-repeat;} 展开
4个回答
展开全部
这个是因为样式优先级的问题，只要把样式更换成
HTML部分:
<a href="#" id="pic2"> </a>
CSS部分:
#pic2 a{background:url(image/frontPageAd_anniversary_txt.jpg) 0 0 no-repeat; width:465px; height:262px; display:block;"}
#pic2 a:hover{ background:url(../image/复件 frontPageAd_anniversary_txt.jpg) 0 0 no-repeat;}
HTML部分:
<a href="#" id="pic2"> </a>
CSS部分:
#pic2 a{background:url(image/frontPageAd_anniversary_txt.jpg) 0 0 no-repeat; width:465px; height:262px; display:block;"}
#pic2 a:hover{ background:url(../image/复件 frontPageAd_anniversary_txt.jpg) 0 0 no-repeat;}
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<a href="#" id="pic2"> </a>
#pic {
display:block;
width:465px;
height:262px;
background-image:url(image/frontPageAd_anniversary_txt.jpg);
background-repeat:no-repeat;
}
#pic:hover{
background-image:url(../image/复件 frontPageAd_anniversary_txt.jpg);
}
本回答被网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
写CSS的时候，把a的四个状态全写一下。
a:list{ }
a:visited{ }
a:hover{ }
a:active{ }
还有链接的地址里面不要出现中文汉字，比如“复件”什么的。
你这样写测试一下：
HTML部分:
<a href="#"></a>
CSS部分:
a{ width:465px; height:262px; background:url(your pic1) no-repeat ;display:block;}
a:list{}
a:visited{background:url(your pic1) no-repeat ;}
a:hover{ background:url(your pic2) no-repeat ;}
a:active{ background:url(your pic1) no-repeat ;}
a:list{ }
a:visited{ }
a:hover{ }
a:active{ }
还有链接的地址里面不要出现中文汉字，比如“复件”什么的。
你这样写测试一下：
HTML部分:
<a href="#"></a>
CSS部分:
a{ width:465px; height:262px; background:url(your pic1) no-repeat ;display:block;}
a:list{}
a:visited{background:url(your pic1) no-repeat ;}
a:hover{ background:url(your pic2) no-repeat ;}
a:active{ background:url(your pic1) no-repeat ;}
追问
我发现在标签中没有背景图片只有a:hover中有背景图片的时候 鼠标悬浮是可以改变背景图片的。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<!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=gb2312" />
<title>无标题文档</title>
<style type="text/css">
a:hover{ background:blue; background-repeat:no-repeat;}
</style>
</head>
<body>
HTML部分:<a href="#" style="background-repeat:no-repeat; width:100px; height:100px;">aaabcb</a>
</body>
</html>
我写了一个改变背景色的代码，因为没有图片，你再自己改一下。
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
a:hover{ background:blue; background-repeat:no-repeat;}
</style>
</head>
<body>
HTML部分:<a href="#" style="background-repeat:no-repeat; width:100px; height:100px;">aaabcb</a>
</body>
</html>
我写了一个改变背景色的代码，因为没有图片，你再自己改一下。
追问
我发现在标签中没有背景图片只有a:hover中有背景图片的时候 鼠标悬浮是可以改变背景图片的。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（2）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
