如何解决 IE 中当鼠标未悬停在图像上时不显示边框的问题
-
09-06-2019 - |
题
我正在尝试对一组图像创建一个相当简单的效果。当鼠标悬停在图像上时,我希望它有一个简单的灰色边框。当它上面确实有图像时,我希望它有一个不同的“选定”边框。
以下 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 中有一个错误导致了这个问题。不幸的是,我似乎找不到修复该错误的方法。
解决方案
尝试使用不同的颜色。我不确定 IE 是否理解“灰色”(而是使用“灰色”)。
其他提示
以下适用于 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>
根据我的经验,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'" />
尝试使用 背景 而不是 边界.
它不一样,但它可以在 IE 中运行(看看我网站上的菜单: www.monex-finance.net).
<!--[if lt IE 7]>
<script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE7.js" type="text/javascript"></script>
<![endif]-->
把它放在你的标题中,应该可以修复一些 ie 错误。
IE 在锚元素以外的任何元素上都存在 :hover 伪类问题,因此您需要将悬停影响的元素更改为锚本身。因此,如果您向锚点添加了像“image”这样的类,并将标记更改为如下所示:
<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;
}
不隶属于 StackOverflow