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;
}