Hover伪类在IE6中的实现

2024-04-01 00:45:21

鼠标滑过行，行改变颜色可以使用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>

转载于:https://www.cnblogs.com/virusswb/articles/1438716.html

Hover伪类在IE6中的实现相关推荐

CSS a:hover伪类在IE6下的问题
就拿对伪类:hover的支持来说,IE7+终于添加了对a以外其它标签的支持.对于这样的改进,当然是要拍手称快的,但在IE6下,:hover就连对a的支持都不是那么的尽如人意.下面就是我想简单说的一个关 ...
Css3中hover伪类的用法
在css3中,hover伪类是鼠标移到元素上时,会为此元素添加特殊的样式的方法,还可以为其他元素添加特殊的样式. 内部代码详情,见截图: 以及输出截图: 在截图中我们可以看到,当我把鼠标移入类denl ...
鼠标的移入、移出事件与css中的hover伪类
开发工具与关键技术:html+css+js 作者: 李伙撰写时间: 2019年1月19日鼠标的移入.移出事件是一个模仿悬停事件(鼠标移入到一个对象上以及移出这个对象)的方法,当鼠标移动到一个匹配的 ...
html css hover事件,用:hover伪类代替js的hover事件_html/css_WEB-ITnose
制作二级菜单要实现鼠标移动上去显示子菜单,鼠标移出子菜单隐藏,或者其他类似需求的地方,首先我会想到用jquery的hover事件来实现,如: $(".nav").hover(fun ...
css选择器、hover伪类
一.css选择器使用css选择器基本流程: 1.制作所需的选择器,并在其中写入样式. 2.将选择器绑定到指定的HTML标签上. 1)class选择器 class选择器 :用 . 来标示自身, 自定义 ...
CSS:hover伪类使用
CSS:hover伪类使用 ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 开发工具与关键技术:Adobe Dreamwe ...
html中伪类的兼容性,css,ie8兼容性_CSS 伪类在IE8中样式无法生效，css,ie8兼容性,伪类 - phpStudy...
CSS 伪类在IE8中样式无法生效写了一个纯CSS的竖版流程样式,效果如下起始 1 2 结束使用:before生成左侧圆,首尾两头的li用:after生成竖条,其余都用border-left填补 ...
IE6 的 hover 伪类 bug
如下代码: Code 1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http: ...
a:hover伪类在ios移动端浏览器内点击无效的解决方法
安卓页面可以打开,苹果端hover上去打不开:hover的没有方法没有激活: a:hover 设置的样式在ios系统的浏览器内显示不出来,看来在iOS系统的移动设备中,需要在按钮元素或body/htm ...

最新文章

热门文章