为a以外的元素使用:hover伪类
2009-03-30 13:19
489 查看
css3中,:hover不仅仅可以用在a元素,已经扩展到绝大多数的标签,然而ie6以下浏览器不支持这种特性,今天看下如何做到兼容:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<title>例子a以为的元素使用CSS3中的:hover伪类</title>
<style type="text/css">
ul
{
margin:0;
padding:0;
list-style-type:none;
}
#ulist
{
font-size:14px;
line-height:1.5em;
border-top:3px solid #119DBB;
width:15em;
margin:0 auto;
}
#ulist li
{
background-color:#C9F1FA;
cursor:pointer;
padding-left:10px;
}
#ulist li:hover,#ulist .li_hover
{
background-color:#FFF;
border-top:1px dotted #14ADCD;
border-bottom:1px dotted #14ADCD;
_border-top-style:solid;
_border-bottom-style:solid;
}
</style>
<!--[if IE 6]>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#ulist>li").each(function(){
$(this).mouseover(function(){
$(this).addClass('li_hover');
}).mouseout(function(){
$(this).removeClass('li_hover');
});
});
});
</script>
<![endif]-->
</head>
<body>
<ul id="ulist">
<li>这是一段测试用的文本</li>
<li>这是一段测试用的文本</li>
<li>这是一段测试用的文本</li>
<li>这是一段测试用的文本</li>
<li>这是一段测试用的文本</li>
<li>这是一段测试用的文本</li>
</ul>
</body>
</html>
对ie6- 采用js实现。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<title>例子a以为的元素使用CSS3中的:hover伪类</title>
<style type="text/css">
ul
{
margin:0;
padding:0;
list-style-type:none;
}
#ulist
{
font-size:14px;
line-height:1.5em;
border-top:3px solid #119DBB;
width:15em;
margin:0 auto;
}
#ulist li
{
background-color:#C9F1FA;
cursor:pointer;
padding-left:10px;
}
#ulist li:hover,#ulist .li_hover
{
background-color:#FFF;
border-top:1px dotted #14ADCD;
border-bottom:1px dotted #14ADCD;
_border-top-style:solid;
_border-bottom-style:solid;
}
</style>
<!--[if IE 6]>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#ulist>li").each(function(){
$(this).mouseover(function(){
$(this).addClass('li_hover');
}).mouseout(function(){
$(this).removeClass('li_hover');
});
});
});
</script>
<![endif]-->
</head>
<body>
<ul id="ulist">
<li>这是一段测试用的文本</li>
<li>这是一段测试用的文本</li>
<li>这是一段测试用的文本</li>
<li>这是一段测试用的文本</li>
<li>这是一段测试用的文本</li>
<li>这是一段测试用的文本</li>
</ul>
</body>
</html>
对ie6- 采用js实现。
相关文章推荐
- 关于伪类与伪元素及其前面的冒号和两个冒号的使用
- IE中伪类:hover的使用及BUG
- CHROME审查元素如何查看hover伪类的CSS?
- csshover.htc在IE7下使用:active伪类无效的原因
- IE6中伪类:hover的使用及BUG
- CSS 伪类、伪元素、选择器的使用
- 【技术帖】IE6所有标签元素支持hover伪类的解决方案
- 【笔记】css hover 伪类控制其他元素
- IE中伪类:hover的使用及BUG
- IE中中CSS伪类:hover的使用及其BUG
- IE中伪类:hover的使用及BUG
- IE中伪类:hover的使用及BUG (1)
- 学习笔记---css中伪元素与伪类(迷惑我的:after与:hover)
- 利用CSS hover伪类改变其他元素的总结
- 使用pointer-events禁用某个元素的:hover
- css:hover状态改变另一个元素样式的使用
- css的伪类和伪元素使用示例
- CSS伪类:hover 在IE中使用及其BUG
- 关于超链接伪类的使用,:link,:visited,:hover
- css精灵和hover伪类的联合使用