2 bianweiall bianweiall 于 2014.12.21 12:11 提问

ie6下兼容li:hover 使用csshover3.htc没有反应,代码哪里有问题?
1. 想知道为什么没有反应呢?代码哪里有问题吗?
2. 下面代码中:hover后面跟的div.pop这个选择器怎么用?
    .top ul.left li.follow:hover div.pop {
           display: block;
    }
  <!DOCTYPE HTML>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>demo</title>
    <meta name="Keywords" content="" />
    <meta name="Description" content="" />
    <!--[if lt IE 9]>
    <script src="js/html5shiv.js"></script>
    <![endif]-->
    <style>
        body,
        ul,
        p {
            margin: 0;
            padding: 0;
        }
        body {
            font-size: 12px;
            behavior: url("http://git.oschina.net/bianweiall/jquery/raw/master/html/jd/css/csshover.htc");
        }
        ul {
            list-style: none;
        }
        a {
            text-decoration: none;
        }
        .container {
            width: 960px;
            margin: 0 auto;
            padding: 0px 10px;
        }
        .clearfloat {
            clear: both;
            height: 0;
            font-size: 1px;
            line-height: 0px;
        }
        /*header start*/
        .top {
            background-color: #F7F7F7;
            border-bottom: 1px solid #EEEEEE;
        }
        .top ul li {
            height: 30px;
            line-height: 30px;
        }
        .top ul li a {
            color: #666;
        }
        .top ul li a:hover {
            color: #E4393C;
            text-decoration: underline;
        }
        /*ul.left start*/
        .top ul.left {
            float: left;
        }
        .top ul.left li {
            height: 30px;
            line-height: 30px;
            margin-right: 18px;
            float: left;
            color: #666;
        }
        .top ul.left li span {
            margin-right: 5px;
            display: block;
            background-repeat: no-repeat;
            float: left;
        }
        .top ul.left li.follow {
            position: relative;
        }
        .top ul.left li.follow div {
            display: none;
            position: absolute;
            width: 116px;
            height: 129px;
            top: 36px;
            left: -50px;
            background-color: #fff;
            border: 1px solid #ddd;
            z-index: 10;
        }
        .top ul.left li.follow div span {
            position: absolute;
            width: 0;
            height: 0;
            left: 48px;
            border-width: 10px;
            border-style: solid;
            _overflow: hidden;
            _border-style: dotted dashed solid dashed;
        }
        .top ul.left li.follow span.arrow1 {
            top: -20px;
            border-color: transparent transparent #ddd transparent;
        }
        .top ul.left li.follow span.arrow2 {
            top: -19px;
            border-color: transparent transparent #fff transparent;
        }
        .top ul.left li.address strong {
            margin-right: 2px;
        }
        .top ul.left li.follow:hover div.pop {
            display: block;
        }
        /*ul.left end*/
    </style>
</head>

<body>
    <div class="header">
        <div class="top">
            <div class="container">
                <ul class="left">
                    <li class="favorites">
                        <a href="#">收藏</a>
                    </li>
                    <li class="follow">
                        <a href="#">关注</a>
                        <div class="pop">
                            <span class="arrow1"></span>
                            <span class="arrow2"></span>
                        </div>
                    </li>
                    <li class="address">
                        <strong>北京</strong><a href="#">[更换]</a>
                    </li>
                </ul>
                <div class="clearfloat"></div>
            </div>
        </div>
    </div>
</body>

</html>

2个回答

testcs_dn
testcs_dn   Rxr 2014.12.26 22:02

因为跨域的问题吧。没这么用过。

u011428846
u011428846   2016.05.07 15:43

自己写个div测试一下。 层级嵌套。

Csdn user default icon
上传中...
上传图片
插入图片
准确详细的回答,更有利于被提问者采纳,从而获得C币。复制、灌水、广告等回答会被删除,是时候展现真正的技术了!