BGイメージを変更するコードは機能しませんが、BGカラーを変更することができます

ユーザーが候補ボタンまたはRecruiterボタンの上を移動するかどうかによって背景イメージを変更しようとしています。BGイメージを変更するコードは機能しませんが、BGカラーを変更することができます

私は次のコード（JS Fiddleで働いていました）を試しましたが、失敗しました。私は背景色のコマンド（コメント行を参照）を挿入し、うまくいきましたので、私は背景画像ラインに関連すると仮定することができますが、私が間違ったことを見ることはできません。

画像は、私はクロームのデベロッパーツールでそれらを調べることができますよう細かいプリロード、

これは私のJSフィドルコード：http://jsfiddle.net/bdenson/m7u4vn6u/

$(document).ready(function() { 




     //Preload 
     $('<img/>').hide().attr('src', '{{url("/img/candidate.jpg")}}').on ('load',function(){ 
      $('body').append($(this)); 
     }); 

     //Preload 
     $('<img/>').hide().attr('src', '{{url("/img/recruiter.jpg")}}').on ('load',function(){ 
      $('body').append($(this)); 
     }); 

     // Change BG on Hover - candidate 
     $('#cand').hover(function() { 
      $('body').css('background-image', '{{url("/img/candidate.jpg")}}'); 
      //$('body').css('background-color', 'red'); 
     }, function() { 
      $('body').css('background', ''); 
     }); 

     // Change BG on Hover - recruiter 
     $('#rec').hover(function() { 
      $('body').css('background-image', '{{url("/img/recruiter.jpg")}}'); 
     }, function() { 
      $('body').css('background', ''); 
     }); 
    });

出典

2016-10-01 Baz

しかし、ポイントは何ですか？していない限り、これは、しかし、どこでもほとんど動作するはずですかボタンからカーソルを移動したときに画像が背景として残るようにしたいですか？ –

いいえユーザーがボタンの上を移動したときにBG画像を表示します。カーソルを動かすと元のbg（青灰色）に戻ります – Baz

jsfiddleでプロジェクトをチェックしているとき、それは完全に動作します... –

私はjqueryのを取り除き、より近代的なWEBAPIとそれを置き換えます。私はそれが大丈夫です願っています。

あなたは、いくつかの古い恐竜ブラウザ:)を使用して http://jsfiddle.net/m7u4vn6u/6/

var bod = document.getElementsByTagName('body')[0]; 
 

 
    var pointerPref = "pointer"; 
 

 
    // Check support for pointer. 
 
    if (!window.PointerEvent && !navigator.pointerEnabled) { 
 
    pointerPref = "mouse"; 
 
    } 
 

 
    //add a eventListener for mouse movement, run mMoveFunc on movement. 
 
    document.addEventListener(pointerPref + "move", mMoveFunc); 
 

 
    function mMoveFunc(evt) { 
 
    //catch event (evt) on mouse movement 
 
    //If evt.target equals one of the buttons(hovering), change bg image. 
 
    //It finds the buttons via the id, 
 
    //you can do it for any html element that takes a id attribute. 
 
    if (evt.target === cand) { 
 
     bod.style.backgroundImage = "url('https://static.pexels.com/photos/40120/pexels-photo-40120.jpeg')"; 
 
    } else if (evt.target === rec) { 
 
     bod.style.backgroundImage = "url('https://static.pexels.com/photos/7366/startup-photos.jpg')"; 
 
    } else { //If none match, remove bg image and show default background. 
 
     bod.style.backgroundImage = ""; 
 
    } 
 

 
    }

body { 
 
    background-repeat: repeat; 
 
    background-color: darkgrey; 
 

 
} 
 

 
.preload { 
 
    display:none; 
 
}

<body> 
 
    
 
    <image class="preload" src="https://static.pexels.com/photos/40120/pexels-photo-40120.jpeg"/> 
 
    <image class="preload" src="https://static.pexels.com/photos/7366/startup-photos.jpg"/> 
 
    
 
    <div class="container"> 
 
    <button id="cand">Candidate</button> 
 

 
    <button id="rec">Recruiter</button> 
 
    </div> 
 
</body>

出典

2016-10-01 12:47:23 user2267175

これは素晴らしい - 最初のホバーと画像の変更の間に遅延があるので、画像をプリロードしていません。 – Baz

@Bazうまくいきませんが、イメージタグにイメージを追加して、それらを見えなくするプリロードクラスを設定しようとしました。しかし、私はそれをやってみたことがないので、それは暗闇の中のショットです:) – user2267175

BGイメージを変更するコードは機能しませんが、BGカラーを変更することができます

答えて

関連する問題