zoukankan      html  css  js  c++  java
  • :hover在IE6的使用

    在IE7+及FF浏览器中,:hover伪类可以用于任何对象,但在IE5、IE6中,:hover伪类仅能用于a(超链接)对象,且该a对象必须要拥有href属性。

    下面是一个鼠标悬停弹出层的代码:

    --------------------------------------

    <style type="text/css">
    #a{100px;height:100px;background:red;position:relative}
    #a div{display:none}
    #a:hover div

    {display:block;100px;height:100px;background:#000;position:absolute;top:50px;left:5

    0px;}
    </style>

    <div id="a">点我吧<div>看到我了吧</div></div>

    ------------------------------------------

    但此代码仅在IE7+及FF浏览器中有效,在IE5及IE6中无效,要使在IE5及IE6中也有效,则必须在外面包裹一个a标签,代码如下:

    ----------------------------------

    <style type="text/css">
    #a{100px;height:100px;background:red;position:relative}
    #a div{display:none}
    a:hover #a div

    {display:block;100px;height:100px;background:#000;position:absolute;top:50px;left:5

    0px;}
    </style>

    <a href="#"><div id="a">点我吧<div>看到我了吧</div></div></a>

    ---------------------------------------------------

    但此时发现在IE5、IE6下仍然无效,原因是a:hover中的css属性必须要相对以前有所改变才能触发hover事件。例如可以增加一个a:hover{zoom:1}属性,

    我们发现除了text-decoration,color,z-index不能触发显示(对于不能触发显示的部分,可以还有某些遗漏的属性)外,其他属性均可以做为消除伪类:hover BUG的特定属性。

    修正后的代码:

    ----------------------------------

    <style type="text/css">
    #a{100px;height:100px;background:red;position:relative}
    #a div{display:none}

    a:hover{zoom:1}  //增添的为了触发hover的属性
    a:hover #a div

    {display:block;100px;height:100px;background:#000;position:absolute;top:50px;left:5

    0px;}
    </style>

    <a href="#"><div id="a">点我吧<div>看到我了吧</div></div></a>

    ---------------------------------------------------

  • 相关阅读:
    vscode设置不展示 .pyc文件
    Centos7安装python3并与python2共存, 以及安装pip(pip3)
    vmware 安装 centos7 及网络配置,永久修改主机名
    VMware虚拟机ubuntu显示屏幕太小解决办法, 安装 VM tools
    struct timeval和gettimeofday()
    cocos2d-x中CCLabelAtlas的小图片拼接
    Core Animation系列之CADisplayLink
    Xcode5 上64位编译 出错No architectures to compile for
    通过OpenGL ES在iOS平台实践增强现实
    通过OpenGL ES在iOS平台实践增强现实(一)
  • 原文地址:https://www.cnblogs.com/2050/p/1769431.html
Copyright © 2011-2022 走看看