HTML与CSS中,如何实现<a>标签鼠标悬浮更换背景图片?我用的Dreamweaver.

我的代码并没有实现:
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"> </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;}
温馨提示:内容为网友见解,仅供参考
第1个回答  推荐于2018-03-15
<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); 
}

本回答被网友采纳
第2个回答  2012-05-01
写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:hover中有背景图片的时候 鼠标悬浮是可以改变背景图片的。

第3个回答  2012-05-01
<!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>

我写了一个改变背景色的代码,因为没有图片,你再自己改一下。追问

我发现在标签中没有背景图片只有a:hover中有背景图片的时候 鼠标悬浮是可以改变背景图片的。

HTML与CSS中,如何实现<a>标签鼠标悬浮更换背景图片?我用的Dreamweaver...
这个是因为样式优先级的问题,只要把样式更换成 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...

html中如何做个漂浮层html漂浮特效代码怎么做
1、使用css中的flaot属性就可以了,首先打开Dreamweaver,创建html文件:2、然后先给页面设置背景颜色,创建段落两个段落,段落上面设置2张图片的float属性,分别让它们左右浮动,值为left和right,最后打开浏览器:3、打开浏览器后即可看到效果,两张图片分别浮动在文本的左右两边,文字则是围绕在图片周围.。

Dreamweaver怎么做html悬停交互效果
1.创建[战点],拖动图像材料素材,并创建CSS文件。2.打开[index],链接文件[]样式。3.创建一个框并添加如图所示的图片。4.创建一个新的[盒子],并添加如图所示的背景色。5.添加悬浮效果。6.添加“SlowExecution”。7.通过添加透明层来添加鼠标点击效果。8.创建[战队、点]并拖动素材。9.新建[html...

Dreamweaver,鼠标悬停,图片切换 代码
鼠标经过图片,在首页的位置放两个图片。(1)一张是直接显示的,(2)另一张是鼠标经过显示的。插入图片方法如下:单击要插入的位置——插入记录——图像对象——鼠标经过图像。原始图像即(1),鼠标经过图像(2)。注意:插入的两张图片一定要和替换掉的图片宽和高相同。以上内容在Dreamweaver中完成。

Dreamweaver中如何制作用鼠标一指就变色的背景
<style type="text\/css"> a:hover { background:#FF0000;} --> <\/style> 切换到代码模式 把上面的代码插入到<head><\/head>之间,其中“FF0000”是你想用的背景色,你可以自由修改(这里以红色为例)

网页代码中鼠标移到图片某个区域自动弹出另一张小图的代码怎么编辑?
DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>图片热区hover效果<\/title> <style>.main-wrap {position: relative; width: 884px; height: 600px; margin: 0 auto;} \/* 宽度与高度必须与背景大图一致 *\/.bigImg {position: absolute; display: none; border: 1px...

如何在html中实现鼠标经过另一张图片时显示它
在DreamWeaver中实现滑动切换图片效果,可以使用‘鼠标经过图像’功能来实现,也可以用CSS控制来实现。现在具体讲一下CSS控制实现图片切换效果!首先制作一个ID为abc的p宽度50px;高度50px;在abc里面随便打一个字设置一个空链接。然后定义abc宽度50px;高度50px;a标签的块形式代码如下:;styletype="text\/...

cssfloat怎么撑满屏幕css让背景图片铺满屏幕
1、使用css中的flaot属性就可以了,首先打开Dreamweaver,创建html文件:2、然后先给页面设置背景颜色,创建段落两个段落,段落上面设置2张图片的float属性,分别让它们左右浮动,值为left和right,最后打开浏览器:3、打开浏览器后即可看到效果,两张图片分别浮动在文本的左右两边,文字则是围绕在图片周围.。

Dreamweaver中 怎样让鼠标在链接文字上方“悬停”时,产生变色,变形等效 ...
<style type="text\/css"> a:link { color: #096;(链接文字的颜色)} a:visited { color: #0FC;(访问过链接的颜色)} a:hover { color: #933;(鼠标经过链接时字体变换的颜色)background-color: #00C;(鼠标经过链接时字体背景变换的颜色)← } a:active { color: #36F;(在链接被...

怎么给dw添加单元格背景图片
1、打开Dreamweaver软件,鼠标左键选择新建【HTML】,在代码窗口上,修改网页title标签,比如设置表格的背景图片示。2、鼠标左键单击菜单,添加【表格】,在弹出的【表格设置】的窗口上,输入表格的行数和列数,并设置表格的宽度。3、在【设计】窗口上,在表格的标题栏中输入风景图片的文字。4、鼠标左键...

相似回答