css – IE不尊重：悬停在元素上

在以下网站上工作： http://cetcolor.com

带有“Read About It”按钮的标头图形具有一个定位链接,悬停时滚动显示橙色按钮图形并且是可点击链接.

但是,在IE浏览器中,它无法正常工作.

这是受影响的HTML：

<div id="header">
    <a href="/" title="CET Color"><img src="images/logo.gif" width="147" height="86" alt="CET Color" class="logo"></a>
    <span class="strapline">Affordable Large-format UV Printing Solutions</span>
    <a href="/pressroom_article8" class="read_about_it"></a>    
</div>

这是引用的CSS：

#header .read_about_it {
    position: absolute;
    top: 239px;
    left: 803px;
    z-index: 100;
    width: 114px;
    height: 17px;
}
#header .read_about_it:hover {
    background-image: url(/images/masthead_index_read_about_i.jpg);
    background-repeat: no-repeat;
    cursor: pointer;
    z-index: 101;
}

有没有人知道为什么悬停不能在IE浏览器中工作？

解决方法

我有一个解决方案给你.只需为read_about_it类定义背景颜色或背景图像.

您的CSS代码/或IE中存在明显的逻辑错误 – 取决于视点.你的A标签是空的 – 我不是指文字而是背景(你改变悬停状态的背景).我们都知道IE生活在自己的世界中,并以不同的方式处理HTML,因为它使用了古老的Trident引擎.但是,如果元素为空(没有背景),IE将不会更改悬停状态的背景,因为IE假定不需要更改或创建尚不存在的内容.干杯!

原文地址：https://www.jb51.cc/css/214865.html