Hover伪类在IE6中的实现
2009-04-18 15:17 Virus-BeautyCode 阅读(1579) 评论(0) 编辑 收藏 举报鼠标滑过行，行改变颜色可以使用javascript写，onmouseover，onmouseout，也可以使用css2的伪类hover，但是ie6对伪类支持的不好，需要变换一下思路，要么使用javascript，onmouseover就变为一个样式，onmouseout在变回去，上一篇文章中转载了一个例子，本文还是用css来实现
下面是我写的一个例子，大家可以扩展它。
Core.cssbody
{
font-size:12px;
}
.ms-kb-protalWebPartTitleArea
{
background: url(_layouts/2052/IMAGES/EVENTS/globalBreadcrumb.gif) top left repeat-x;
font-size:15px;
}
.ms-kb-portalWebPartContentArea
{
font-size:12px;
width:365px;
}
.ms-kb-portalWebPartContentArea tr
{
}
.ms-kb-portalWebPartContentArea tr:hover
{
background-color:Red;
font-size:20px;
/* display:block;*/
}
.hoverClass
{
}
.hover
{
display:block;
background-color:Red;
font-size:20px;
}
PortalWebPart.ascx<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="PortalWebPart.ascx.cs" Inherits="WebApp.PortalWebPart" %>
<link href="Css/core.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="Css/jquery-1.3.2-vsdoc.js">
</script>
<script type="text/javascript">
$(function() {
$(".hoverClass tr").hover(
function() {
$(this).addClass("hover");
}, function() {
$(this).removeClass("hover");
});
})
</script>
<div>
<table class="ms-kb-protalWebPartTitleArea">
<tr>
<td>
<img alt="" src="Images/bgPortalWebPartTitle.gif"
style="width: 365px; height: 26px" />任务
</td>
</tr>
</table>
<table class="ms-kb-portalWebPartContentArea hoverClass">
<tr style="width: 365px; height: 26px"><td><a href="#">购买打印器材</a></td></tr>
<tr style="width: 365px; height: 26px"><td><a href="#">准备外出演示文档</a></td></tr>
<tr style="width: 365px; height: 26px"><td><a href="#">计划项目方案</a></td></tr>
<tr style="width: 365px; height: 26px"><td><a href="#">制定下半年计划</a></td></tr>
</table>
</div>
上面的列子参考了下面的实现技巧
hover伪类在ie6下的处理方式<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<!-- saved from url=(0049)http://www.cssrain.cn/demo/ie6hover/ie6hover.html -->
<HTML
xmlns="http://www.w3.org/1999/xhtml"><HEAD><TITLE>hover伪类在ie6下的处理方式</TITLE>
<META content="text/html; charset=utf-8" http-equiv=Content-Type>
<STYLE type=text/css>* {
PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0px
}
BODY {
TEXT-ALIGN: center; FONT: 12px/1.6em 宋体, Verdana, serif, sans-serif; BACKGROUND: white; COLOR: black
}
IMG {
BORDER-BOTTOM: 0px; BORDER-LEFT: 0px; BORDER-TOP: 0px; BORDER-RIGHT: 0px
}
UL {
LIST-STYLE-TYPE: none; LIST-STYLE-IMAGE: none
}
OL {
LIST-STYLE-TYPE: none; LIST-STYLE-IMAGE: none
}
H1 {
LINE-HEIGHT: 30px; HEIGHT: 30px; FONT-SIZE: 14px
}
.productList {
TEXT-ALIGN: left; MARGIN: 50px auto 0px; WIDTH: 420px; HEIGHT: 400px
}
.product {
POSITION: relative; WIDTH: 200px; DISPLAY: inline; FLOAT: left; MARGIN-LEFT: 10px
}
.product IMG {
BORDER-BOTTOM: silver 1px solid; BORDER-LEFT: silver 1px solid; PADDING-BOTTOM: 19px; PADDING-LEFT: 19px; PADDING-RIGHT: 19px; BORDER-TOP: silver 1px solid; BORDER-RIGHT: silver 1px solid; PADDING-TOP: 19px
}
.other-info {
POSITION: absolute; FILTER: progid:DXImageTransform.Microsoft.Alpha(opacity=80); PADDING-BOTTOM: 0px; PADDING-LEFT: 10px; WIDTH: 180px; PADDING-RIGHT: 10px; DISPLAY: none; BACKGROUND: #cfdde8 0% 50%; MARGIN-LEFT: 0px; TOP: 161px; PADDING-TOP: 0px; LEFT: 0pt; opacity: 0.8
}
.product:hover .other-info {
DISPLAY: block
}
.hover .other-info {
DISPLAY: block
}
</STYLE>
<SCRIPT type=text/javascript
src="hover伪类在ie6下的处理方式_files/jquery-1[1].2.1.pack.js"></SCRIPT>
<SCRIPT language=JavaScript>
<!--
$(function(){
$(".hoverClass").hover(
function(){
$(this).addClass("hover");
},function(){
$(this).removeClass("hover");
});
})
//-->
</SCRIPT>
<META name=GENERATOR content="MSHTML 8.00.6001.18702"></HEAD>
<BODY>
<H1>IE6下的hover伪类处理</H1>
<DIV class=productList>
<UL>
<LI class="product hoverClass">
<DIV class=productInfo>
<DIV class=productPic><A
href="http://www.cssrain.cn/demo/ie6hover/ie6hover.html#"><IMG alt=多普达
src="hover伪类在ie6下的处理方式_files/t.jpg"> </A></DIV>
<DIV class=productName><SPAN>商品名称：</SPAN>多普达手机 </DIV>
<DIV>其他关于产品的信息，把鼠标移向这里。 </DIV></DIV>
<DIV class=other-info>
<UL>
<LI>价格：￥2300.00元 </LI>
<LI>操作系统：Windows Mobile 6</LI></UL></DIV></LI>
<LI class="product hoverClass">
<DIV class=productInfo>
<DIV class=productPic><A
href="http://www.cssrain.cn/demo/ie6hover/ie6hover.html#"><IMG alt=多普达
src="hover伪类在ie6下的处理方式_files/t.jpg"> </A></DIV>
<DIV class=productName><SPAN>商品名称：</SPAN>多普达手机 </DIV>
<DIV>其他关于产品的信息，把鼠标移向这里。 </DIV></DIV>
<DIV class=other-info>
<UL>
<LI>价格：￥2300.00元 </LI>
<LI>操作系统：Windows Mobile 6</LI></UL></DIV></LI></UL></DIV><PRE>淘宝效果预览：<A href="http://list.mall.taobao.com/1343/g-s-----40-0--1343.htm">http://list.mall.taobao.com/1343/g-s-----40-0--1343.htm</A><BR>
其实，问题很简单，就是hover伪类在IE6中得不到很好的支持，<BR>
因为IE6只支持css1，而在css1中hover伪类只能针对a标签来起作用，<BR>
看了一下淘宝的代码，他们的解决方法是：<BR>
首先，按照ie7/FF都支持的css2的写法来写。<BR>
其次针对IE6不支持css2再做特殊处理。也就是通过javascript来弥补ie6下的不足。<BR>
这段javascript的原理是这样的：<BR>
code:<BR>
根据某些特征找到需要添加hover效果的标签,<BR>
对此标签添加onmouseover和onmouseout事件,<BR>
在onmouseover事件中给对象赋予新的css class属性，<BR>
同样，在onmouseout时移除该css class即可模拟成hover伪类的效果了。<BR>
</PRE>转 <A href="http://www.iwcn.net/">大伟's Blog</A> </BODY></HTML>
