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

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

0 голосов
/ 15 сентября 2008

Я пытаюсь создать довольно простой эффект для набора изображений. Если на изображении нет мыши, я бы хотел, чтобы оно имело простую серую рамку. Когда на нем есть изображение, я бы хотел, чтобы у него была другая "выделенная" граница.

Следующий CSS отлично работает в Firefox: 

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

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

Ответы [ 6 ]

1 голос
/ 15 сентября 2008

По моему опыту, 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'" />
1 голос
/ 15 сентября 2008

Следующее работает в 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>
1 голос
/ 15 сентября 2008

Попробуйте использовать другой цвет. Я не уверен, что IE понимает «серый» (вместо этого используйте «серый»).

0 голосов
/ 15 сентября 2008 
<!--[if lt IE 7]>
<script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE7.js" type="text/javascript"></script>
<![endif]-->

вставьте это в заголовок, исправьте некоторые ошибки, т. Е.

0 голосов
/ 15 сентября 2008

Попробуйте использовать фон вместо border .

Это не то же самое, но это работает в IE (посмотрите меню на моем сайте: www.monex-finance.net ).

0 голосов
/ 15 сентября 2008

IE имеет проблемы с псевдоклассом: hover для чего-либо, кроме элементов привязки, поэтому вам нужно изменить элемент, на который влияет 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;
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...