闲话少说，先贴代码：
//左边的面板
var leftPanel = new Ext.FormPanel({
region: 'center',
id:'panel_left',
frame: true,
border: false,
width: 95，
html: <div class='showName1'>css效果1</div><div class='showName2'>css效果2</div>
});
上面是一个面板，其中我使用了html属性直接将测试数据打印在界面上，两个css效果如下：
.showName1:hover{
color: orange;
font-style: italic;
}
.showName2{
color: orange;
font-style: italic;
}
运行发现只有showName2有效果，而showName1根本没实现hover效果！我不使用extjs而直接写在一个网页上是有效果的，不知为何，于是改成用ext控件来实现：
//左边的面板
var leftPanel = new Ext.FormPanel({
region: 'center',
id:'panel_left',
frame: true,
border: false,
width: 95，
items:[
{
xtype: 'label', //使用label控件显示文本
Cls: 'showName1',//用标准cls属性指定css样式类
text: 'css效果1'
},{
xtype: 'label',
cls: 'showName2',
text: 'css效果3'
},{
xtype: 'box', //因为害怕是label控件不支持hover效果，所以直接用boxComponent基础 //类再测试一下
autoEl:{
tag: 'div',//不用label控件而直接使用div层
Cls: 'showName1',
html:'css效果1'
}
},{
xtype: 'label',
overCls: 'showName2',//看帮助文档上说overCls属性就是hover的效果，所以再用这个测试一下
text: 'css效果2'
},{
xtype: 'box',
autoEl:{
tag: 'div',//再也div测试overCls，确保测试用例覆盖完全
overCls: 'showName2',
html:'css效果2'
}
}
]
});
ok！！运行程序，发现showName1还是没有hover效果，而不带hover的showName2效果却展现了出来！！因为extjs中label不含有mouseover事件，所以只有用css的方式实现鼠标移上去的特效，可是为什么没有效果啊！！愁死我了！！万望extjs达人不吝赐教！拜谢了~~
//左边的面板
var leftPanel = new Ext.FormPanel({
region: 'center',
id:'panel_left',
frame: true,
border: false,
width: 95，
html: <div class='showName1'>css效果1</div><div class='showName2'>css效果2</div>
});
上面是一个面板，其中我使用了html属性直接将测试数据打印在界面上，两个css效果如下：
.showName1:hover{
color: orange;
font-style: italic;
}
.showName2{
color: orange;
font-style: italic;
}
运行发现只有showName2有效果，而showName1根本没实现hover效果！我不使用extjs而直接写在一个网页上是有效果的，不知为何，于是改成用ext控件来实现：
//左边的面板
var leftPanel = new Ext.FormPanel({
region: 'center',
id:'panel_left',
frame: true,
border: false,
width: 95，
items:[
{
xtype: 'label', //使用label控件显示文本
Cls: 'showName1',//用标准cls属性指定css样式类
text: 'css效果1'
},{
xtype: 'label',
cls: 'showName2',
text: 'css效果3'
},{
xtype: 'box', //因为害怕是label控件不支持hover效果，所以直接用boxComponent基础 //类再测试一下
autoEl:{
tag: 'div',//不用label控件而直接使用div层
Cls: 'showName1',
html:'css效果1'
}
},{
xtype: 'label',
overCls: 'showName2',//看帮助文档上说overCls属性就是hover的效果，所以再用这个测试一下
text: 'css效果2'
},{
xtype: 'box',
autoEl:{
tag: 'div',//再也div测试overCls，确保测试用例覆盖完全
overCls: 'showName2',
html:'css效果2'
}
}
]
});
ok！！运行程序，发现showName1还是没有hover效果，而不带hover的showName2效果却展现了出来！！因为extjs中label不含有mouseover事件，所以只有用css的方式实现鼠标移上去的特效，可是为什么没有效果啊！！愁死我了！！万望extjs达人不吝赐教！拜谢了~~
<!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>
<style type="text/css">
.showName1:hover{
color: orange;
font-style: italic;
}
.showName2{
color: orange;
font-style: italic;
}
</style>
<link type="text/css" rel="stylesheet" href="../../ext/resources/css/ext-all.css" />
<script type="text/javascript" src="../../ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../../ext/ext-all.js"></script>
<script type="text/javascript">
Ext.onReady(
function() {
var leftPanel = new Ext.FormPanel({
renderTo: Ext.get('a'),
id:'panel_left',
frame: true,
border: false,
width: 95,
html: "<div class='showName1'>css效果1</div><div class='showName2'>css效果2</div>"
});
}
);
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>checkbox</title>
</head><body>
<div id = 'a'></div>
</body>
</html>
换成 onmouseover
或
a 标签