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>

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

  • 相关阅读:
    OKR实施方法——关于思路和流程的思考
    如何制作一份疫情场所分布地图?(附数据和源码)
    经纬度编码方法推荐-plus code简介
    快递到车服务的实现思路和问题思考
    ACC自适应巡航控制系统介绍
    《无人驾驶》-了解无人驾驶最佳读物
    手把手教你制作微信小程序,开源、免费、快速搞定
    2点GPS坐标求方位角
    GPRS 应用详解_GPRSsim800c(转)
    STM32的ADC采样与多通道ADC采样(转)
  • 原文地址:https://www.cnblogs.com/2050/p/1769431.html
Copyright © 2011-2022 走看看