Question

带有“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浏览器中不起作用？

Answer 1

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

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

Answer 2

添加“display：block;”对它，它应该适合你。

#header .read_about_it {
  display: block;
  position: absolute;
  top: 239px;
  left: 803px;
  z-index: 100;
  width: 114px;
  height: 17px;
}

Answer 3

我遇到了同样的问题，我用以下方法解决了这个问题：

#header .read_about_it {
  display: block;
  background: rgba(255, 255, 255, 0);
  position: absolute;
  top: 239px;
  left: 803px;
  z-index: 100;
  width: 114px;
  height: 17px;
}

“background：rgba（255,255,255,0）”是解决此问题的关键字。但是你想要IE-7或者更老，你可以把background-image：url（URL_TO_TRANSPARENT_IMAGE）。

Answer 4

如果您使用的是IE6，则不支持：将鼠标悬停在除

之外的任何元素上

<a>

我使用javascript

解决了这个问题

onmouseover
onmouseout

事件。

IE不尊重：悬停在元素上

4 个答案: