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>

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

  • 相关阅读:
    SQL update select
    Centos7 update dotnet 无法识别
    asp.net core mvc 在中间件中使用依赖注入问题:System.InvalidOperationException: Cannot resolve scoped service 'IXXXService' from root provider.
    SQL Server类型与C#类型对应关系
    .NET Core ABP
    支付宝小程序获取用户授权
    .Net 多线程,异步且控制并发数量
    SQL:尝试将不可为 NULL 的列的值设置为 NULL
    .Net Core依赖注入和服务注册
    .NET Core配置主机端口的几种方式
  • 原文地址:https://www.cnblogs.com/2050/p/1769431.html
Copyright © 2011-2022 走看看