Как я могу исправить проблему в IE, из-за которой границы не отображаются при наведении курсора мыши на изображение

StackOverflow https://stackoverflow.com/questions/63885

  •  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.Ключ состоял в том, чтобы использовать:link:hover.IE6 превратил элемент A в блочный элемент, именно поэтому я добавил плавающий элемент для термоусадочной упаковки содержимого.

Обратите внимание, что он находится в Стандартном режиме.Не знаю, что произошло бы в режиме quirks.

<!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;
}
Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top