展开全部
可以直接在DW的代码区域输入相应代码即可解决：
背景图片hover 很简单的
#globalNavi {
width: 908px;
margin: 0 auto 18px;
height: 42px;
overflow: hidden;
}
#globalNavi li {
float: left;
}
#globalNavi li a {
display: block;
}
#globalNavi li.gnavi01 a {
width: 97px;
background: url(../img/template/globalnavi01_out.jpg) no-repeat;
}
#globalNavi li.gnavi02 a {
width: 158px;
background: url(../img/template/globalnavi02_out.jpg) no-repeat;
}
#globalNavi li.gnavi03 a {
width: 118px;
background: url(../img/template/globalnavi03_out.jpg) no-repeat;
}
#globalNavi li.gnavi04 a {
width: 118px;
background: url(../img/template/globalnavi04_out.jpg) no-repeat;
}
#globalNavi li.gnavi05 a {
width: 128px;
background: url(../img/template/globalnavi05_out.jpg) no-repeat;
}
#globalNavi li.gnavi06 a {
width: 128px;
background: url(../img/template/globalnavi06_out.jpg) no-repeat;
}
#globalNavi li a:hover {
background-color: #FFFFFF;
}
#globalNavi li a:hover img {
visibility: hidden;
}
上面是css样式，下面是代码：
<ul id="globalNavi">
<li class="gnavi01"><a href="/"><img src="common/img/template/globalnavi01_out.jpg" alt="Top Page" /></a></li>
<li class="gnavi02"><a href="/"><img src="common/img/template/globalnavi02_out.jpg"alt="30" /></a></li>
<li class="gnavi03"><a href="/"><img src="common/img/template/globalnavi03_out.jpg" alt="竣" /></a></li>
<li class="gnavi04"><a href="/"><img src="common/img/template/globalnavi04_out.jpg" alt="原" /></a></li>
<li class="gnavi05"><a href="/"><img src="common/img/template/globalnavi05_out.jpg" alt="住" /></a></li>
<li class="gnavi06"><a href="/"><img src="common/img/template/globalnavi06_out.jpg" alt="计 /></a></li>
</ul>
如果是矩形区域，可以直接用CSS
比如原HTML标签为
<a href="#">博客</a>
然后CSS部分加上代码 a {background:blue} 然后 a:hover {background:red} 这样可以实现背景色的转换，如果想要变色的区域不是矩形，那就得准备好原图和激活图了，然后也用 a:hover {background:url()}来实现了，很简单。
上面的是一个背景图片
是用js改变样式
<div style="" onmouseover=“aa(this);” onmouseout="aaa(this);"> 鼠标放上来试试</div>
<script>
function aa(obj)
{
obj.style.background="blue";//你也可以把后面的值换成图片
//obj.style.background="url(图片路径)";
}
function aaa(obj)
{
obj.style.background="red";
}
</script>
也可以复制下面代码保存成html即可：
<!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">
<!--
img{border:0;}
#nav {height:32px;list-style:none;float:left;}
#nav li{float:left;font-size:14px; line-height:32px;}
#nav li a{color:#FFF;text-decoration:none;display:block;width:78px;height:32px;text-align:center; background-color:#ccc;}
#nav li a:hover{ background-color:#F00;color:#FFF;}
-->
</style>
</head>
<body>
<ul id="nav">
<li><a href="#">首 页</a></li>
<li><a href="#">我的相册</a></li>
<li><a href="#">照片冲印</a></li>
<li><a href="#">礼品定制</a></li>
<li><a href="#">精彩画廊</a></li>
<li><a href="#">中华空间</a></li>
</ul>
</body>
</html>
上面的那个是更换图片的
要更换背景的话在字体所在的单元格写上：onMouseOver="this.bgColor='想改变的颜色'"
<td onMouseOver="this.bgColor='想改变的颜色'" onMouseOut="this.bgColor=''原来的颜色">导航文字</td>
背景图片hover 很简单的
#globalNavi {
width: 908px;
margin: 0 auto 18px;
height: 42px;
overflow: hidden;
}
#globalNavi li {
float: left;
}
#globalNavi li a {
display: block;
}
#globalNavi li.gnavi01 a {
width: 97px;
background: url(../img/template/globalnavi01_out.jpg) no-repeat;
}
#globalNavi li.gnavi02 a {
width: 158px;
background: url(../img/template/globalnavi02_out.jpg) no-repeat;
}
#globalNavi li.gnavi03 a {
width: 118px;
background: url(../img/template/globalnavi03_out.jpg) no-repeat;
}
#globalNavi li.gnavi04 a {
width: 118px;
background: url(../img/template/globalnavi04_out.jpg) no-repeat;
}
#globalNavi li.gnavi05 a {
width: 128px;
background: url(../img/template/globalnavi05_out.jpg) no-repeat;
}
#globalNavi li.gnavi06 a {
width: 128px;
background: url(../img/template/globalnavi06_out.jpg) no-repeat;
}
#globalNavi li a:hover {
background-color: #FFFFFF;
}
#globalNavi li a:hover img {
visibility: hidden;
}
上面是css样式，下面是代码：
<ul id="globalNavi">
<li class="gnavi01"><a href="/"><img src="common/img/template/globalnavi01_out.jpg" alt="Top Page" /></a></li>
<li class="gnavi02"><a href="/"><img src="common/img/template/globalnavi02_out.jpg"alt="30" /></a></li>
<li class="gnavi03"><a href="/"><img src="common/img/template/globalnavi03_out.jpg" alt="竣" /></a></li>
<li class="gnavi04"><a href="/"><img src="common/img/template/globalnavi04_out.jpg" alt="原" /></a></li>
<li class="gnavi05"><a href="/"><img src="common/img/template/globalnavi05_out.jpg" alt="住" /></a></li>
<li class="gnavi06"><a href="/"><img src="common/img/template/globalnavi06_out.jpg" alt="计 /></a></li>
</ul>
如果是矩形区域，可以直接用CSS
比如原HTML标签为
<a href="#">博客</a>
然后CSS部分加上代码 a {background:blue} 然后 a:hover {background:red} 这样可以实现背景色的转换，如果想要变色的区域不是矩形，那就得准备好原图和激活图了，然后也用 a:hover {background:url()}来实现了，很简单。
上面的是一个背景图片
是用js改变样式
<div style="" onmouseover=“aa(this);” onmouseout="aaa(this);"> 鼠标放上来试试</div>
<script>
function aa(obj)
{
obj.style.background="blue";//你也可以把后面的值换成图片
//obj.style.background="url(图片路径)";
}
function aaa(obj)
{
obj.style.background="red";
}
</script>
也可以复制下面代码保存成html即可：
<!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">
<!--
img{border:0;}
#nav {height:32px;list-style:none;float:left;}
#nav li{float:left;font-size:14px; line-height:32px;}
#nav li a{color:#FFF;text-decoration:none;display:block;width:78px;height:32px;text-align:center; background-color:#ccc;}
#nav li a:hover{ background-color:#F00;color:#FFF;}
-->
</style>
</head>
<body>
<ul id="nav">
<li><a href="#">首 页</a></li>
<li><a href="#">我的相册</a></li>
<li><a href="#">照片冲印</a></li>
<li><a href="#">礼品定制</a></li>
<li><a href="#">精彩画廊</a></li>
<li><a href="#">中华空间</a></li>
</ul>
</body>
</html>
上面的那个是更换图片的
要更换背景的话在字体所在的单元格写上：onMouseOver="this.bgColor='想改变的颜色'"
<td onMouseOver="this.bgColor='想改变的颜色'" onMouseOut="this.bgColor=''原来的颜色">导航文字</td>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<a href="" class="nava">导航1</a>
<a href="" class="nava">导航2</a>
<a href="" class="nava">导航3</a>
<a href="" class="nava">导航4</a>
<a href="" class="nava">导航5</a>
<a href="" class="nava">导航6</a>
<style>
.nava{color:#000000;display:block;float:left;padding:10px;background:#CCCCCC;}
.nava:hover{color:#FF0000;background:#BBBBBB;}
</style>
===================================
使用说明：
直接将以上代码复制到您的网页代码里的适当位置粘贴即可。
提示：以上代码中，<style>与</style>之间放置的是CSS代码，这些代码可以控制a标签的显示样式。
如需修改链接本来的文字颜色，请在CSS样式中.nava样式里找到color这个参数，修改其颜色代码即可。
如需修改链接变幻时的文字颜色，请在CSS样式中.nava:hover样式里修改color这个参数，方法同上。
如需修改链接本来的背景颜色，请在CSS样式表中.nava样式里找到background这个参数，修改其颜色值即可，如果需要显示背景图片，请把background:#CCCCCC;替换为background:url(这里是您的图片地址);即可。
如需修改链接变换时的背景颜色，请在CSS样式表中.nava:hover样式里找到background这个参数，修改其颜色值即可，如果需要显示背景图片，请把background:#BBBBBB;替换为background:url(这里是您的图片地址);即可。
<a href="" class="nava">导航2</a>
<a href="" class="nava">导航3</a>
<a href="" class="nava">导航4</a>
<a href="" class="nava">导航5</a>
<a href="" class="nava">导航6</a>
<style>
.nava{color:#000000;display:block;float:left;padding:10px;background:#CCCCCC;}
.nava:hover{color:#FF0000;background:#BBBBBB;}
</style>
===================================
使用说明：
直接将以上代码复制到您的网页代码里的适当位置粘贴即可。
提示：以上代码中，<style>与</style>之间放置的是CSS代码，这些代码可以控制a标签的显示样式。
如需修改链接本来的文字颜色，请在CSS样式中.nava样式里找到color这个参数，修改其颜色代码即可。
如需修改链接变幻时的文字颜色，请在CSS样式中.nava:hover样式里修改color这个参数，方法同上。
如需修改链接本来的背景颜色，请在CSS样式表中.nava样式里找到background这个参数，修改其颜色值即可，如果需要显示背景图片，请把background:#CCCCCC;替换为background:url(这里是您的图片地址);即可。
如需修改链接变换时的背景颜色，请在CSS样式表中.nava:hover样式里找到background这个参数，修改其颜色值即可，如果需要显示背景图片，请把background:#BBBBBB;替换为background:url(这里是您的图片地址);即可。
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
