Активировать фоновое изображение при каждой новой ссылке - PullRequest
Новая
       46

Активировать фоновое изображение при каждой новой ссылке

0 голосов
/ 08 марта 2020

Я не профессионал в кодировании, и я пытаюсь вызвать другое фоновое изображение, которое занимает всю страницу в фоновом режиме, когда мышь наводит курсор на каждую ссылку.

Вот код: 

<div class="bloc-films">
        <a href="project/crepuscule.html">Crépuscule en Mineur</a><br>
        <a href="project/belabandonne.html">Bel Abandonné</a><br>
        <a href="project/alicia.html">Alicia's Dream</a><br>
    </div>

Вот CSS

    .bloc-films {
font-size: 20px;
font-weight: 400;
font-style: italic;
text-align: center;
line-height: 200%;
position: fixed;
transform: translate(-50%, -50%);
top: 50%;
left: 50%; }

1 Ответ

0 голосов
/ 08 марта 2020

HTML Код 

<div class="links">
  <a href="page-1.html" class="page-1">Page 1</a>
  <a href="page-2.html" class="page-2">Page 2</a>
</div>

CSS Код 

.links a:hover::before {
  content: '';
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: -1;
}

.page-1::before {
  background-image: url("./img/bg-1.jpg");
}
.page-2::before {
  background-image: url("./img/bg-2.jpg");
}

Изменить фоновое изображение : url () к вашему пути изображения.

...