IE 8のCSSホバー

Question

これはIEで動作するようになっていますが、完璧なFirefoxで動作します。これは私のCSSを書いた方法によるものですか？

おかげ

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(); 
     }); 
    } 

Answer 1

これはIE 8たぶん、あなたのイメージのパスでは動作してはならない理由はありません 間違っています。 また、aタグからすべての情報が得られたので、ホバーを繰り返す必要はありません。

背景色をお試しください。うまくいくと思います。人間の理解IE8を超えた理由から

.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; 
} 

Answer 2

（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(); 
     }); 
    } 

Answer 3

でIE6で最高のデザインビューについて9にあなたは以下のJavaScriptライブラリを使用する必要があります。

これは交換することで調整できます。これらのjsを呼び出すだけで、残りはjsを実行します。

• 重要： - これらのJSがないファイル

  1. htmlshivの体に頭の中で呼び出さなければなりませんHTML5の新しいタグ
  2. google js CSS3の新しいクラスのためのIE
  3. selectivizr jsのため