javascript - 如何在将鼠标悬停在按钮上时将背景图像更改为另一个图像？

Question

我在一张图片上有五个按钮。每次您将鼠标悬停在每个按钮上时，我希望背景图像根据您悬停的每个按钮而改变。我尝试使用 CSS 执行此操作，但这在应用“悬停”效果时似乎不是很有效。只有当您将鼠标悬停在背景上时它才会起作用，并且它会发生变化，但当您将鼠标悬停在按钮上时则不会。

如果我尝试通过在 li 部分添加一个类并在主要背景图像下方添加一种图像 Sprite 来应用 CSS“悬停”效果，则该图像只会出现在 li 部分中em>li 本身而不是作为背景封面。

我认为 jQuery/javascript 会更好。但是，我不确定如何应用我想要的东西。我尝试使用 javascript 执行悬停操作，但我不确定为什么它不起作用。以下代码是 JSFiddle 上主要代码的片段。有人有什么建议吗？

$(document).ready(function() {

  //Preload
  $('<img/>').hide().attr('src', 'http://s3.amazonaws.com/nxs-kxantv-media-us-east-1/photo/2016/03/21/image-jpeg237_35345271_ver1.0_640_360.jpg').load(function() {
    $('#primary').append($(this));
  });

  $('#screenprinting').hover(function() {
    $('#primary').css('background-image', 'url("http://s3.amazonaws.com/nxs-kxantv-media-us-east-1/photo/2016/03/21/image-jpeg237_35345271_ver1.0_640_360.jpg")');
  }, function() {
    $('#primary').css('background', '');
  });
});

#mma #primary.hp {
  background-image: url(https://static.wixstatic.com/media/75ac83_423a4fd973804ba7b9f918a46481616b~mv2.jpg/v1/fill/w_1567,h_611,al_c,q_85,usm_0.66_1.00_0.01/75ac83_423a4fd973804ba7b9f918a46481616b~mv2.jpg);
  background-position: 43% top
}

<div id="mma" data-trackingposition="mma">
  <div id="primary" class="hp clearfix" data-speed="6" data-type="background">

    <div class="bucket">
      <p style="color:white;">Insure the things you love most...</p>
      <p class="title" style="color:white">Select a policy to get a quote</p>

      <span id="productheader" role="heading">asdf</span>

      <ul class="iconlist">
        <li class="attached check" data-prod="au">

          <span><a id="screenprinting" href="#" aria-expanded="false" aria-label="Auto insurance" style="color:white;"><small><img src="https://static.wixstatic.com/media/75ac83_a3a5ee1aa8d6493abf7e20d1088719d7~mv2_d_1208_1208_s_2.png/v1/fill/w_600,h_600,al_c,usm_0.66_1.00_0.01/75ac83_a3a5ee1aa8d6493abf7e20d1088719d7~mv2_d_1208_1208_s_2.png" class="insurance-img"></small>Auto</a></span>

        </li>
        <li class="attached property" data-prod="ho">
          <span><a href="#" aria-expanded="false" aria-label="Home & Renters insurance" style="color:white;"><small><img src="https://static.wixstatic.com/media/75ac83_141f12dd5fc848b08fe41f79eded1260~mv2_d_1208_1208_s_2.png/v1/fill/w_600,h_600,al_c,usm_0.66_1.00_0.01/75ac83_141f12dd5fc848b08fe41f79eded1260~mv2_d_1208_1208_s_2.png" class="insurance-img"></small>Home </a></span>
          <span class="icon close"><a href="#" aria-label="Collapse Home & Renters" role="button">&#xe137;</a></span>
        </li>
      </ul>
    </div>
  </div>
</div>

Answer 1

您需要导入 jQuery 库才能在 jQuery 中运行

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

$(document).ready(function() {

  //Preload
  $('<img/>').hide().attr('src', 'http://s3.amazonaws.com/nxs-kxantv-media-us-east-1/photo/2016/03/21/image-jpeg237_35345271_ver1.0_640_360.jpg').load(function() {
    $('#primary').append($(this));
  });

  $('#screenprinting').hover(function() {
    $('#primary').css('background-image', 'url("http://s3.amazonaws.com/nxs-kxantv-media-us-east-1/photo/2016/03/21/image-jpeg237_35345271_ver1.0_640_360.jpg")');
  }, function() {
    $('#primary').css('background', '');
  });
});

#mma #primary.hp {
  background-image: url(https://static.wixstatic.com/media/75ac83_423a4fd973804ba7b9f918a46481616b~mv2.jpg/v1/fill/w_1567,h_611,al_c,q_85,usm_0.66_1.00_0.01/75ac83_423a4fd973804ba7b9f918a46481616b~mv2.jpg);
  background-position: 43% top
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="mma" data-trackingposition="mma">
  <div id="primary" class="hp clearfix" data-speed="6" data-type="background">

    <div class="bucket">
      <p style="color:white;">Insure the things you love most...</p>
      <p class="title" style="color:white">Select a policy to get a quote</p>

      <span id="productheader" role="heading">asdf</span>

      <ul class="iconlist">
        <li class="attached check" data-prod="au">

          <span><a id="screenprinting" href="#" aria-expanded="false" aria-label="Auto insurance" style="color:white;"><small><img src="https://static.wixstatic.com/media/75ac83_a3a5ee1aa8d6493abf7e20d1088719d7~mv2_d_1208_1208_s_2.png/v1/fill/w_600,h_600,al_c,usm_0.66_1.00_0.01/75ac83_a3a5ee1aa8d6493abf7e20d1088719d7~mv2_d_1208_1208_s_2.png" class="insurance-img"></small>Auto</a></span>

        </li>
        <li class="attached property" data-prod="ho">
          <span><a href="#" aria-expanded="false" aria-label="Home & Renters insurance" style="color:white;"><small><img src="https://static.wixstatic.com/media/75ac83_141f12dd5fc848b08fe41f79eded1260~mv2_d_1208_1208_s_2.png/v1/fill/w_600,h_600,al_c,usm_0.66_1.00_0.01/75ac83_141f12dd5fc848b08fe41f79eded1260~mv2_d_1208_1208_s_2.png" class="insurance-img"></small>Home </a></span>
          <span class="icon close"><a href="#" aria-label="Collapse Home & Renters" role="button">&#xe137;</a></span>
        </li>
      </ul>
    </div>
  </div>
</div>