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

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，您唯一需要做的就是设置div#pagina 的高度。 您可以通过将其设置为 height to 100% 来做到这一点，但它的父母也必须有 100% 的高度，并且通常需要进行一些调整才能使其看起来正确。

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

1. 如果可能，在body 元素上添加背景图片
2. 如果可能，在你的 CSS 中将图像定义为 background-image，并为其分配一个类，例如 .pagina-background-image { background-image: 'path/to/img.jpeg'}。通过这种方式，您可以使用 CSS 更有效地向背景添加过渡效果，例如淡入和类似效果。

另外，我建议您稍微优化一下jQuery。 当您将 div 悬停在文本“test”时，您可以检查控制台日志。

$(document).ready(function() {
  var $pagina = $('#pagina');

  $pagina.hover(function() {
    $pagina.toggleClass('background-image');
  });
});

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

Answer 3

我对此页面进行了一些更改 :( 现在，他们希望悬停时的背景图像成为实时预览... 所以我这样设置 iframe 框：

<div id="unu" class="cerculet"><div id="unua"><a href="http://tineriiuniti.ro/contact/">Contact</a><div class="box"><iframe src="http://tineriiuniti.ro/contact/" width = "500px" height = "500px"></iframe></div></div>
        </div>

还有 CSS：

.box {
    display: none;
    width: 100%;
}

a:hover + .box,.box:hover{
    display: block;
    position: relative;
    z-index: 100;
    opacity: 0.3;
}

但它显示为弹出窗口。如何更改背景图片中的这种制作方式？