Question

我在一张图片上有五个按钮。每次将鼠标悬停在每个按钮上时，我希望背景图像根据您悬停的每个按钮进行更改。我尝试使用CSS来做这件事，但是当应用＆＃34; hover＆＃34;时，这似乎并不是非常有效。影响。只有当您将鼠标悬停在背景本身上并且它会发生变化时它才会起作用，但是当您将鼠标悬停在按钮上时则无效。

如果我尝试应用CSS＆＃34; hover＆＃34;通过在 li 部分添加一个类以及在主背景图像下面的一种图像精灵，该图像只会出现在 li 本身而不是作为背景覆盖。

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

＆＃13;

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

＆＃13;

#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
}

＆＃13;

<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>

＆＃13;

Answer 1

您需要导入jQuery库以使其在jQuery中工作

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

＆＃13;

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

＆＃13;

#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
}

＆＃13;

<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>

＆＃13;

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

1 个答案: