css - IE 不遵守 :hover on element

Question

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

带有“Read About It”按钮的 header 图形有一个带悬停的定位链接，当鼠标悬停时，该链接会显示橙色按钮图形，并且是一个可点击的链接。

但是，在 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 浏览器中不起作用？

Answer 1

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

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