Проблема с наведением изображения в Google Chrome - PullRequest
Новая
       8

Проблема с наведением изображения в Google Chrome

3 голосов
/ 14 декабря 2010

У меня очень странная проблема с наведением изображения в Google Chrome.

При наведении курсора мыши на меню я получаю фоновое изображение в Mozilla и IE, но не в Chrome.

Я использовал следующий CSS-скрипт для пункта меню. 

.content_resize { padding-right:0; padding-top:16px; width:930px;background-color:#fff; }
.content .mainbar { float:left; width:630px;}
.content .newstick { float:center; width:650px;}
.content .mainbar img { margin-bottom:24px; padding:4px; border:1px solid #b7b7b7; background-color:#fff;}
.content .mainbar img.fl { float:left; margin-right:12px;}
.content .mainbar .article, .content .sidebar .gadget { margin:0; padding:0 0 16px 0;}
.content .sidebar { float:right; width:276px;}
ul.sb_menu, ul.ex_menu { margin:0; padding:0; list-style:none; color:#959595;}
ul.sb_menu li, ul.ex_menu li { margin:0; }
ul.sb_menu li { padding:4px 0; border-bottom:1px solid #e3e3e3; width:220px;}
ul.ex_menu li { padding:4px 0 8px;}
ul.sb_menu li a, ul.ex_menu li a { color:#5f5f5f; text-decoration:none; margin-left:-16px; padding-left:5px;}

ul.sb_menu li a:hover, ul.ex_menu li a:hover { color:#FFFFFF; font-weight:bold; display:block; width:200px ; height:25px; background:url(images/menu_bg.gif)  no-repeat left top;}

ul.sb_menu li a:hover { text-decoration:underline;}
ul.ex_menu li a:hover { text-decoration:none;}
.content .scroll {  float:left; background:url(images/scroll_bg.gif)  no-repeat left top;  display:block; margin-left:35px; height:200px; width:180px;  OVERFLOW: hidden;background-color:transparent;}

Работает нормально с Internet Explorer и Mozilla. Пока не отображается фоновое изображение для меню при зависании в Chrome. Может ли кто-нибудь помочь мне, пожалуйста?

Ответы [ 2 ]

0 голосов
/ 10 апреля 2014

У вас просто та же проблема, что и в этой теме: chrome не отображает фоновое изображение gif

Изображения GIF неправильно отображаются в Chrome, если они применяются при наведении (т. Е.. img: hover).

Таким образом, у вас есть несколько вариантов:

  1. Если ваши изображения не анимированы: измените формат ваших изображений
  2. Если вашизображения анимированы: используйте обходной путь, см. ответы на вопрос хром не отображает gif фоновое изображение
0 голосов
/ 17 февраля 2011

Надеюсь, еще не поздно ответить?

Это происходит потому, что display:block; запускается при наведении, что, похоже, не нравится WebKit. Это должно работать, если вы переместите свойство display:block; с ul.sb_menu li a:hover, ul.ex_menu li a:hover на ul.sb_menu li a, ul.ex_menu li a

Пока вы занимаетесь этим, вероятно, имеет смысл переместить width:200px; и height:25px; в одно и то же место. Кстати, это не должно влиять на то, как это выглядит в IE, Firefox или Opera.

...