Изменение фоновых изображений с JQuery для различных дивы

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>

Можете ли вы сказать, что проблема здесь? Идентификатор «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. Определить изображение как background-image в вашем CSS, если это возможно, и назначить класс для него, как это .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; 
} 

Но он отображается как всплывающее окно Как я могу изменить это изготовление в backgr Изображение ound?