0

我正在尝试在一组图像上创建一个相当简单的效果。当图像没有鼠标悬停时，我希望它有一个简单的灰色边框。当它上面有图像时，我希望它有一个不同的“选定”边框。

以下 CSS 在 Firefox 中运行良好：

.myImage a img
{
    border: 1px solid grey;
    padding: 3px;
}
.myImage a:hover img
{
    border: 3px solid blue;
    padding: 1px;
}

但是，在 IE 中，当鼠标未悬停在图像上时，不会出现边框。我的 Google-fu 告诉我 IE 中存在导致此问题的错误。不幸的是，我似乎找不到修复该错误的方法。

4

6 回答 6

1

尝试使用不同的颜色。我不确定 IE 是否理解“灰色”（而是使用“灰色”）。

于 2008-09-15T15:37:13.567 回答
1

以下适用于 IE7、IE6 和 FF3。关键是使用a:link:hover。IE6 将 A 元素变成了块元素，这就是为什么我添加了浮动内容来收缩包装内容。

请注意，它处于标准模式。不知道在怪癖模式下会发生什么。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
    <title></title>
    <style type="text/css">
      a, a:visited, a:link, a *, a:visited *, a:link * { border: 0; }
      .myImage a
      {
          float: left;
          clear: both;
          border: 0;
          margin: 3px;
          padding: 1px;
      }
      .myImage a:link:hover
      {
          float: left;
          clear: both;
          border: 3px solid blue;
          padding: 1px;
          margin: 0;
          display:block;
      }
    </style>
  </head>
  <body>
    <div class="myImage"><a href="#"><img src="http://stackoverflow.com/Content/Img/stackoverflow-logo-250.png"></a></div>
    <div class="myImage"><a href="#"><img src="http://stackoverflow.com/Content/Img/stackoverflow-logo-250.png"></a></div>
  </body>
</html>
于 2008-09-15T15:50:22.867 回答
1

以我的经验，IE 不适用于伪类。我认为最通用的处理方法是使用 Javascript 将 CSS 类应用于元素。

CSS：

.standard_border
{
    border: 1px solid grey;
    padding: 3px;
}
.hover_border
{
    border: 3px solid blue;
    padding: 1px;
}

内联 Javascript：

<img src="image.jpg" alt="" class="standard_border" onmouseover="this.className='hover_border'" onmouseout="this.className='standard_border'" />
于 2008-09-15T15:52:50.770 回答
0

IE 在锚元素以外的任何东西上都有 :hover 伪类的问题，因此您需要将悬停影响到锚本身的元素更改。因此，如果您在锚点中添加了一个类似“图像”的类并将您的标记更改为如下所示：

<div class="myImage"><a href="..." class="image"><img .../></a></div>

然后，您可以将 CSS 更改为如下所示：

.myImage a.image
{
    border: 1px solid grey;
    padding: 3px;
}
.myImage a.image:hover
{
    border: 3px solid blue;
    padding: 1px;
}

这应该通过将边框放在锚点而不是图像上来模拟所需的效果。请注意，您可能需要在 CSS 中使用类似以下内容来消除图像的默认边框：

.myImage a img {
    border: none;
}
于 2008-09-15T15:45:54.500 回答
0

尝试使用背景而不是边框​​。

它不一样，但它可以在 IE 中使用（查看我网站上的菜单：www.monex-finance.net）。

于 2008-09-15T15:52:43.967 回答
0 
<!--[if lt IE 7]>
<script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE7.js" type="text/javascript"></script>
<![endif]-->

把它放在你的标题中，应该可以修复一些 ie 错误。

于 2008-09-15T15:56:47.657 回答