изменить фоновое изображение при наведении ссылки без использования JS - PullRequest
Новая
       30

изменить фоновое изображение при наведении ссылки без использования JS

0 голосов
/ 30 октября 2018

Я хочу изменить фоновое изображение тела (или моего раздела) при наведении ссылки, как в этом примере:

http://www.passion -pictures.com / париж / директора /

Есть ли способ сделать это без использования JS.

Я знаю только, как кодировать HTML / CSS

РЕДАКТИРОВАТЬ:

При наведении указателя мыши на первую ссылку (Мишель) он меняет фон моего раздела, как и ожидалось. Но когда я наведите курсор на вторую ссылку (Franck), верхняя часть моего второго фона ссылки начинается под моей первой ссылкой. Так что верх моего фона по умолчанию все еще виден. Мои ссылки отображаются вертикально

Ответы [ 2 ]

0 голосов
/ 30 октября 2018

Надеюсь, это поможет вам

HTML 

<div class="container">
    <a href="#" class="bg1">bg1</a>
</div>

CSS 

.bg1:hover::after {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  background: red;
  width: 100%;
  height: 100%;
  z-index: -1; /* index would get changed based on your need */
}
0 голосов
/ 30 октября 2018

Возможно, но будет слишком много HTML-кода и CSS-решений.

если вы все еще хотите использовать только CSS, используйте этот код - изменить фон CSS при наведении курсора

HTML код 

<div class=container>
  <div class="link">
    <a href="#" class="bg1">bg1</a>
    <div class=background></div>
    <a href="#" class="bg2">bg2</a>
    <div class=background><div>
  </div>
</div>

Код CSS 

div.link > a {
  displya: inline-block !important;
  position: relative !important;
  z-index: 5;
}

.bg1:hover + .background {
  background: red;
}

.bg2:hover + .background {
  background: green;
}

.background {
  background: transparent;
  position: absolute;
  width:100%;
  height: 100%;
  top:0;
  left: 0;
}

Это даст вам представление о реализации, но я предложу вам использовать JS, который является гораздо лучшим способом сделать это.

...