Hover伪类在IE6中的实现

最新推荐文章于 2024-08-14 15:45:18 发布

weixin_34303897

最新推荐文章于 2024-08-14 15:45:18 发布

阅读量84

点赞数

文章标签： javascript c# xhtml ViewUI

鼠标滑过行，行改变颜色可以使用javascript写，onmouseover，onmouseout，也可以使用css2的伪类hover，但是ie6对伪类支持的不好，需要变换一下思路，要么使用javascript，onmouseover就变为一个样式，onmouseout在变回去，上一篇文章中转载了一个例子，本文还是用css来实现

下面是我写的一个例子，大家可以扩展它。

Core.css
body
{
    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">

<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>
    
    </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>

weixin_34303897

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Hover伪类在IE6中的实现

鼠标滑过行，行改变颜色可以使用javascript写，onmouseover，onmouseout，也可以使用css2的伪类hover，但是ie6对伪类支持的不好，需要变换一下思路，要么使用javascript，onmouseover就变为一个样式，onmouseout在变回去，上一篇文章中转载了一个例子，本文还是用css来实现下面是我写的一个例子，大家可以扩展它。...
复制链接

扫一扫

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。