Question

我正在尝试更改背景图片，具体取决于用户是否将鼠标悬停在“候选人”按钮或“招聘人员”按钮上。

我已经尝试了以下代码（在JS Fiddle中工作）并且它失败了。我插入了一个background-color命令（参见注释行）并且工作正常，所以我只能假设它与背景图像行相关，但我看不出我做错了什么。

图像预装正常，因为我可以在Chrome devtools中检查它们，

这是我的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', '');
        });
    });

Answer 1

我删除了jquery并将其替换为更现代的webAPI。我希望没关系。

除非你使用一些旧的dino-browser :)，否则它应该可以在任何地方工作， 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>

更改BG图像的代码不起作用，但可以更改BG颜色

1 个答案: