IE не уважает: наведите на элемент - PullRequest
Новая
       11

IE не уважает: наведите на элемент

6 голосов
/ 22 марта 2012

Работа на следующем веб-сайте: http://cetcolor.com

Графический заголовок с кнопкой «Читать об этом» имеет позиционную ссылку с наведением курсора, которая при наведении курсора отображает оранжевый значок кнопки и является интерактивной ссылкой.

Однако в браузерах IE он не работает.

Вот уязвимый HTML-код: 

<div id="header">
    <a href="/" title="CET Color"><img src="images/logo.gif" width="147" height="86" alt="CET Color" class="logo"></a>
    <span class="strapline">Affordable Large-format UV Printing Solutions</span>
    <a href="/pressroom_article8" class="read_about_it"></a>    
</div>

А вот ссылочный CSS-код: 

#header .read_about_it {
    position: absolute;
    top: 239px;
    left: 803px;
    z-index: 100;
    width: 114px;
    height: 17px;
}
#header .read_about_it:hover {
    background-image: url(/images/masthead_index_read_about_i.jpg);
    background-repeat: no-repeat;
    cursor: pointer;
    z-index: 101;
}

Кто-нибудь знает, почему в браузерах IE не работает hover?

Ответы [ 4 ]

9 голосов
/ 22 марта 2012

У меня есть решение для вас. Просто определите цвет фона или фоновое изображение для вашего класса read_about_it.

В вашем CSS-коде / или в IE есть очевидная логическая ошибка - зависит от точки зрения. Ваш тег A пуст - я имею в виду не текст, а фон (вы меняете фон в состоянии наведения). Мы все знаем, что IE живет в своем собственном мире и обрабатывает HTML по-другому, потому что использует древний движок Trident. Однако IE не изменит фон при наведении, если элемент пуст (не имеет фона), потому что IE предполагает, что нет необходимости изменять или создавать то, что еще не существует.
Ура! * * 1004

4 голосов
/ 22 марта 2012

Добавить «display: block;»к этому, и это должно работать для вас. 

#header .read_about_it {
  display: block;
  position: absolute;
  top: 239px;
  left: 803px;
  z-index: 100;
  width: 114px;
  height: 17px;
}
3 голосов
/ 05 июня 2013

У меня та же проблема, и я решил эту проблему с помощью: 

#header .read_about_it {
  display: block;
  background: rgba(255, 255, 255, 0);
  position: absolute;
  top: 239px;
  left: 803px;
  z-index: 100;
  width: 114px;
  height: 17px;
}

"background: rgba (255, 255, 255, 0)" - это ключевое слово для решения этой проблемы. Но вы хотите IE-7 ИЛИ старше, вы можете поместить background-image: url (URL_TO_TRANSPARENT_IMAGE).

1 голос
/ 22 марта 2012

Если вы используете IE6, он не поддерживает: hover для любых элементов, кроме 

<a>

Я справился с этим с помощью javascript 

onmouseover
onmouseout

событие.

...