DedeCMS批改模板当鼠标有焦点时图片是呈现黄色块

DedeCMS修改模板当鼠标有焦点时图片是呈现黄色块

修改模板时想产生这样的效果：

当鼠标有焦点时图片是呈现黄色块的

1、频道栏在head.htm中的定义

<div id="navMenu">    <ul><!--chenyujing 这里可以把首页去掉--><li><a href='{dede:global.cfg_cmsurl/}/'><span>首页</span></a></li>{dede:channel type='top' row='10' currentstyle="<li class='hover'><a href='~typelink~' ~rel~><span>~typename~</span></a></li>"}<li class="channel"><a href='[field:typeurl/]' [field:rel/]><span>[field:typename/]</span></a></li>{/dede:channel}    </ul>    </div>

2、当鼠标时，即hover的css样式定义为：

#navMenu ul li a.hover span, #navMenu ul li a:hover span {cursor:pointer;display:inline-block;height:22px;    color:#DEFF01;line-height:20px;margin:0 0 0 5px;padding:0 5px 0 0;text-align:center;vertical-align:middle;}

以上CSS，最近一层HTML元素为span，因为我们的频道定义时最近一层是span：

样式定义的语法为两种情况下采用此样式：

（1）#navMenu ul li a.hover span

（2）#navMenu ul li a:hover span

3、在CSS定义块中添加BACKGROUND:url属性

#navMenu ul li a.hover span, #navMenu ul li a:hover span {cursor:pointer;display:inline-block;height:22px;    color:#DEFF01;line-height:20px;margin:0 0 0 5px;padding:0 5px 0 0;text-align:center;vertical-align:middle;BACKGROUND:url(menu_over.jpg) repeat-x;}

改进：

可以对BACKGROUND:url指定的路径采用相对路径（注意：路径是相对自己的css而言，不是相对于使用CSS的HTM文件的路径而言的。）

#navMenu ul li a.hover span, #navMenu ul li a:hover span {cursor:pointer;display:inline-block;height:22px;    color:#DEFF01;line-height:20px;margin:0 0 0 5px;padding:0 5px 0 0;text-align:center;vertical-align:middle;BACKGROUND:url(../images/menu_over.jpg) repeat-x;}