Question

我有这个代码和这个脚本：

 $(document).ready(function() {
   $('#unua').hover(function() {
     $('#pagina').css('background-image', 'url(imagini/1.png)');
   }, function() {
     $('#pagina').css('background-image', '');
   });
 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="pagina">
  <div id="primalinie">
    <div id="unu" class="cerculet">
      <div id="unua">
        <a href="http://tineriiuniti.ro/contact/">Contact</a>
      </div>
    </div>
    <div id="doi" class="cerculet">
      <div id="doia">
        <a href="http://tineriiuniti.ro/despre-atu/">About Us</a>
      </div>
    </div>
  </div>

你能告诉我这里有什么问题吗？ ID“pagina”，用于整个页面。让我告诉你这个问题。我希望每当用户将鼠标放在一个div上时，站点的背景图像就会改变。不同的div，不同的形象。：（

Answer 1

要轻松一下，请看一下这个问题：How to fade changing background image

替换$('#pagina').css('background-image', 'url(imagini/1.png)');

带

$('#elem').fadeTo('slow', 0.3, function() {
    $(#pagina).css('background-image', 'url(imagini/1.png)');
}).fadeTo('slow', 1);

Answer 2

如果我理解正确，您希望在悬停某些元素时更改您的网站背景图片？您想要这样做的方法是更改div#pagina的背景，但div的高度不会覆盖整个页面？至少这是代码在这里显示的内容？

那么，在这种情况下，由于您的jQuery已经在background-image进行div交换，您唯一需要做的就是设置{{1}的高度1}}。你可以通过设置它div#pagina来做到这一点，但它的父母也必须有100％的高度，并且通常需要一些调整才能使它看起来正确。

我建议的其他解决方案由两部分组成：

如果可能，在height to 100%元素上添加背景图片
如果可能，在css中将图片定义为body，并为其指定一个类，例如background-image。通过这种方式，您可以使用CSS将转换添加到背景中，例如淡入和类似效果。

另外，我建议您稍微优化.pagina-background-image { background-image: 'path/to/img.jpeg'}。将jQuery悬停在文本“test”上时，可以检查控制台日志。

div

$(document).ready(function() {
  var $pagina = $('#pagina');

  $pagina.hover(function() {
    $pagina.toggleClass('background-image');
  });
});

使用JQuery为不同的div更改背景图像

2 个答案: