但是，还是告诉你css3可以达成“处理click事件”类似的效果，比如checkbox，click后就能利用UI元素状态伪类来实现相应的变化，这种变化有点类似处理click事件，只是小范围的应用。
比如纯css3实现的checkbox按钮开关，你可以到mxria网站上看CSS3按钮开关的实现DEMO
css3在响应用户操作上很弱，基本上还是实现静态样式为主
使用z-index:来给元素层定位置。CSS pointer-events
Pointer-events原本来源于SVG，目前在很多浏览器中已经得到体现。不过，要让任何HTML元素生效还得借助于一点点css。该属性称之为pointer-events，基本上可以将它设置为auto，这是正常的行为，而“none”是一个有趣的属性。
将它应用到一个元素
如果你已经设置一个元素的css属性为pointer-events: none。它将不会捕获任何click事件，而是让事件穿过该元素到达下面的元素，就像这样：
<style>
.overlay {
pointer-events: none
}
</style>
<div id="overlay" class="overlay"></div>
浏览器支持
到目前为止，Firefox 3.6+、Safari 4 和Google Chrome支持Pointer-events。我觉得Opera和IE肯定会尽快赶上，我不知道它们的计划中是否支持它。
/* 字体链接样式 */
td.firstLevelMenuClass a:link {color: #3E8BAC text-decoration: none} /* 未访问的链接 */
td.firstLevelMenuClass a:visited {color: #FFFFFF text-decoration: none} /* 已访问的链接 */
td.firstLevelMenuClass a:hover {color: #FFFFFF} /* 鼠标移动到链接上 */
td.firstLevelMenuClass a:active {color: #FFFFFF} /* 选定的链接 */
/* 鼠标事件背景样式 */
td.firstLevelMenuClass:hover {background-image: url(../../Public/img/menu_first_down_bg.gif) } /* 鼠标移动到链接上 */
td.<span style="color:#cc0000">firstLevelMenuClassHover</span>{background-image: url(../../Public/img/menu_first_down_bg.gif) }
td.firstLevelMenuClass{background-image: url(../../Public/img/head_menu_center.gif) }
JS:
[javascript] view plain copy
/*
* 取得对应类和标签的HTML元素
* clsName:给定类名
* tagName：给定的HTML元素，如果为任意 tagName='*'
*
*/
function getElementsByClassName(clsName, tagName) {
var ClassElements = []
selElements = document.getElementsByTagName(tagName)
for (var i = 0 i < selElements.length i++) {
if (selElements[i].className == clsName) {
ClassElements[ClassElements.length] = selElements[i]
}
}
return ClassElements
}
//通过改变元素class名达到间接改变背景样式
function onFirstMenuChangeBg(e) {
//先清除已经改变的元素背景样式
var getElements = getElementsByClassName('<span style="color:#cc0000">firstLevelMenuClassHover</span>', 'td')
for (var i = 0 i < getElements.length i++) {
getElements[i].className = "firstLevelMenuClass"
}
//设置鼠标点击元素背景样式
e.className = "firstLevelMenuClassHover"
}
HTML:
[html] view plain copy
<td class="firstLevelMenuClass" id="firstLevelMenu0" onclick="onFirstMenuChangeBg(this)" >
<a href='#'>测试0</a>
</td>
<td class="firstLevelMenuClass" id="firstLevelMenu1" onclick="onFirstMenuChangeBg(this)" >
<a href='#'>测试1</a>
</td>
<td class="firstLevelMenuClass" id="firstLevelMenu2" onclick="onFirstMenuChangeBg(this)" >
<a href='#'>测试2</a>
</td>
