Как я могу исправить проблему в IE, когда границы не отображаются, когда мышь не наведена на изображение
Я пытаюсь создать довольно простой эффект на наборе изображений. Если на изображении нет курсора мыши, я бы хотел, чтобы у него была простая серая рамка. Когда на нем есть изображение, я бы хотел, чтобы у него была другая, «выбранная» граница.
Следующий 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 есть ошибка, которая вызывает эту проблему. К сожалению, я не могу найти способ исправить эту ошибку.
Ответы 6
Попробуйте использовать другой цвет. Я не уверен, что IE понимает «серый» (вместо этого используйте «серый»).
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;
}
Следующее работает в IE7, IE6 и FF3. Ключевым моментом было использование: 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 (посмотрите меню на моем сайте: www.monex-finance.net).
Это отличное предложение, и выполнение этого (которое работает) помогло мне выяснить настоящую проблему (мое название цвета).
По моему опыту, 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'" />
<!--[if lt IE 7]>
<script src = "http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE7.js" type = "text/javascript"></script>
<![endif]-->
поместите это в заголовок, чтобы исправить некоторые из ошибок, т.е.
Можете ли вы опубликовать HTML-код, чтобы мы могли увидеть структуру?