2012-01-30 2 views
0

Не могу заставить это работать в IE, но отлично работает в Firefox, это связано с тем, как я написал свой CSS?css hover in IE 8

Благодаря

R

CSS

.theme-default .nivo-directionNav a { 
    display:block; 
    width:26px; 
    height:23px; 
    background: url(../images/arrows-3.png) no-repeat; 
    text-indent:-9999px; 
    border:0; 
} 

.theme-default .nivo-directionNav a:hover { 
    display:block; 
    width:26px; 
    height:23px; 
    background: url(../images/arrows-over-1.png) no-repeat; 
    text-indent:-9999px; 
    border:0; 
} 

Javascript

//Add Direction nav 
if(settings.directionNav){ 
    slider.append(
     '<div class="nivo-directionNav"> 
      <a class="nivo-prevNav">'+ settings.prevText +'</a> 
      <a class="nivo-nextNav">'+ settings.nextText +'</a> 
     </div>' 
    ); 
    //Hide Direction nav 
    if(settings.directionNavHide){ 
     $('.nivo-directionNav', slider).hide(); 
     slider.hover(function(){ 
      $('.nivo-directionNav', slider).show(); 
     }, 
     function(){ 
      $('.nivo-directionNav', slider).hide(); 
     }); 
    } 
+1

Также разместите свою разметку HTML. Укажите, как это показано сейчас и как оно должно проявляться. Также удалите «введите код здесь» – Jawad

+4

Вам не нужно повторять себя, для вашего правила ': hover' нужен только измененный фон, остальные будут применяться по вашему предыдущему правилу. – MMM

+0

Привет Это работает с Javascript кодом, поэтому его не в HTML – Rifki

ответ

0

Там нет причин это не должно работать в IE 8. Возможно, ваш путь изображения это неверно. Также вам не нужно повторять фигурки в: hover, потому что все разбирается в теге.

Попробуйте сделать фоновый рисунок, и я думаю, он будет работать. Выяснить проблему с фоновым изображением, если это работает (красный цвет фона на состоянии парения):

.theme-default .nivo-directionNav a { 
    display:block; 
    width:26px; 
    height:23px; 
    background: url(../images/arrows-3.png) no-repeat; 
    text-indent:-9999px; 
    border:0; 
} 

.theme-default .nivo-directionNav a:hover { 
    background: url(../images/arrows-over-1.png) no-repeat 0 0 #FF0000; 
} 
2

По причинам за пределами человеческого понимания IE8 (возможно, другие версии IE также) не применяют :hover государства, если ссылка имеет ассоциированное свойство href.

Это может быть исправлено путем замены:

//Add Direction nav 
if(settings.directionNav){ 
    slider.append(
     '<div class="nivo-directionNav"> 
      <a class="nivo-prevNav">'+ settings.prevText +'</a> 
      <a class="nivo-nextNav">'+ settings.nextText +'</a> 
     </div>' 
    ); 
    //Hide Direction nav 
    if(settings.directionNavHide){ 
     $('.nivo-directionNav', slider).hide(); 
     slider.hover(function(){ 
      $('.nivo-directionNav', slider).show(); 
     }, 
     function(){ 
      $('.nivo-directionNav', slider).hide(); 
     }); 
} 

с

//Add Direction nav 
if(settings.directionNav){ 
    slider.append(
     '<div class="nivo-directionNav"> 
      <a class="nivo-prevNav" href="#">'+ settings.prevText +'</a> 
      <a class="nivo-nextNav" href="#">'+ settings.nextText +'</a> 
     </div>' 
    ); 
    //Hide Direction nav 
    if(settings.directionNavHide){ 
     $('.nivo-directionNav', slider).hide(); 
     slider.hover(function(){ 
      $('.nivo-directionNav', slider).show(); 
     }, 
     function(){ 
      $('.nivo-directionNav', slider).hide(); 
     }); 
    } 
+0

Согласитесь, это может быть причиной. –

0

Для лучшего зрения дизайна в IE6 до 9 вы должны использовать JavaScript библиотеки ниже. просто назовите эти js, только rest будет делать js.

  • важны: - этот JS должен быть вызван в голове не в теле файла

    1. htmlshiv для html5 новых тегов
    2. google js для IE
    3. selectivizr JS для CSS3 новых классов