Question

我有以下HTML和CSS：

<div id="topdevelopments" class="colnm colw6 clearfix">
    <a href="homes-for-sale/development/beaufort-park-6/" class="colnm agreen colw2"> 
        <img src="wp-content/themes/philosophy/images/noimage/212x153.png" width="212" height="153" alt="No Image" title="No Image" />
        <span class="popup"> 
            <span class="first">Recent development</span> 
            <span class="heading">Beaufort Park 6</span> 
        <span class="content">1, 2 & 3 bedroom apartments available from £160,000</span> 
        </span> 
        <span class="ir corner">&nbsp;</span> 
        <span class="ir go">&nbsp;</span> 
    </a> 
    <a href="homes-for-sale/development/beaufort-park-5/" class="col apurple colw2"> 
        <img src="wp-content/themes/philosophy/images/noimage/212x153.png" width="212" height="153" alt="No Image" title="No Image" />
        <span class="popup"> 
            <span class="heading">Beaufort Park 5</span> 
            <span class="content">1, 2 & 3 bedroom apartments available from £160,000</span> 
        </span> 
        <span class="ir corner">&nbsp;</span> 
        <span class="ir go">&nbsp;</span> 
    </a> 
    <a href="homes-for-sale/development/beaufort-park-4/" class="col ablue colw2"> 
        <img src="wp-content/themes/philosophy/images/noimage/212x153.png" width="212" height="153" alt="No Image" title="No Image" />
        <span class="popup"> 
            <span class="heading">Beaufort Park 4</span> 
            <span class="content">1, 2 & 3 bedroom apartments available from £160,000</span> 
        </span> 
        <span class="ir corner">&nbsp;</span> 
        <span class="ir go">&nbsp;</span> 
    </a>
</div>

CSS：

#topdevelopments {

}
    #topdevelopments a {
        border:#4D4D4D 10px solid;
        display:block;
        color:#fff !important;
        font-family:"MetaPlusBookRoman", sans-serif;
        font-size:16px;
        height:153px;
        margin-bottom:10px;
        overflow:hidden;
        position:relative;
        width:212px;
    }
        #topdevelopments a span { display:block; }
        #topdevelopments a span.popup {
            height:133px;
            left:0px;
            overflow:hidden;
            padding:10px;
            position:absolute;
            top:153px;
            width:192px;
            -webkit-transition: all 0.5s ease-in-out;
            -moz-transition: all 0.5s ease-in-out;
            -o-transition: all 0.5s ease-in-out;
            -webkit-transition: all 0.5s ease-in-out;
            transition: all 0.5s ease-in-out;
        }
        #topdevelopments a:hover span.popup { top:0px; }
        #topdevelopments a.agreen span.popup { background-color:#C1D82F; }
        #topdevelopments a.ablue span.popup { background-color:#36A6E8; }
        #topdevelopments a.apurple span.popup { background-color:#C6168D; }
        #topdevelopments a span.popup .first {
            font-family:"MetaPlusBlackRoman", sans-serif;
            font-size:20px;
            opacity:0.5;
        }
        #topdevelopments a span.popup .heading {
            border-bottom:#fff 2px solid;
            font-family:"MetaPlusBlackRoman", sans-serif;
            font-size:20px;
            margin-bottom:5px;
        }
        #topdevelopments a span.corner {
            background:url(images/corner/corner-dgrey.png);
            bottom:0px;
            height:40px;
            position:absolute;
            right:0px;
            width:40px;
        }
        #topdevelopments a span.go {
            bottom:4px;
            height:16px;
            position:absolute;
            right:4px;
            width:16px;
        }
        #topdevelopments a.agreen span.go { background-image:url(images/go/go-green.png); }
        #topdevelopments a.ablue span.go { background-image:url(images/go/go-blue.png); }
        #topdevelopments a.apurple span.go { background-image:url(images/go/go-purple.png); }
        #topdevelopments a.agreen:hover span.go { background-image:url(images/go/goh-green.png); }
        #topdevelopments a.ablue:hover span.go { background-image:url(images/go/goh-blue.png); }
        #topdevelopments a.apurple:hover span.go { background-image:url(images/go/goh-purple.png); }

当发生“A”徘徊时，应该通过更改“top”参数来查看绝对位于视图之外的“span”。这可以工作，但在IE6和IE7只有它无法工作。我无法弄清楚为什么。谁知道为什么？

我将添加每个“A”链接都向左浮动。

Answer 1

添加：

#topdevelopments a:hover {
  text-indent: 0;
}

IE喜欢a:hover上的规则，然后它会激活它的扩展名，例如a:hover span

只要尚未在a规则

上声明，任何事情都会发生

即。我选择了text-indent: 0，因为它是a规则

中尚未包含的默认值

Answer 2

我创建了这个JSFiddle。我认为您在:hover上遗失了#topdevelopments a span.go。

编辑虽然看似有效，但您在显示的链接上会丢失光标图标！你可以用更多的CSS纠正它，但它看起来有点乱。如果其他解决方案有效，它可能会更优雅。

IE6,7上的链接悬停，绝对定位不会改变孩子

2 个答案: