как поменять фон при наведении на кнопку(без Javascript)

Question

Хочу поменять главный фон всего сайта(body) при наведении на кнопку(.joinbtn), у меня все написано на Python, html, css. Джаваскриптом не владею, надеюсь можно и без него обойтись

    background-image: url('https://i.pinimg.com/originals/a6/ac/92/a6ac9244c02998a5dcce22c324d8d8a4.gif');
    background-size: 100%;
    font-family: "Comfortaa", sans-serif;
}


.joinbtn {
    border: 5px solid;
    border-color: whitesmoke;
    text-decoration: none;
    border-radius: 10px;
    color: whitesmoke;
    padding: 50px 100px;
    font-size: 50px;
    transition: 1s;
    background-image: url('https://media1.giphy.com/media/v1.Y2lkPTc5MGI3NjExZGR6b3NzdG1ocHEyaGNiZjgxdGs2ZmhwMDR0M2ZleXJsMDE3djFsZSZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/KcnbWfsuFr7JpgowGT/giphy.gif');
}

.joinbtn:hover{
    color: darkorchid;
    box-shadow: 0 0 50px 10px #fff;
    transition: 1s;

}

base.html(отрывок)

            <div class="navbar">
                <div class="navtext">
                    <button class="btn" href="/">Main</button>
                    <a class="btn" href="/discord/">idkbtn</a>
                </div>
            </div>
        </header>

index.html

{% include 'base.html' %}
<div class="center container text-center col-md-8 offset-md-2">
    <a class="joinbtn" href="https://discord.gg/MZPbNGQ8">Join DEPO</a>
</div>

Answer 1

Вот модельный код. Магию делает вот эта строчка body:has(.btn:hover) {}

Множественный фон использовать обязательно, иначе вы получите мигание, т.к. браузер будет тратить время на загрузку нового изображения.

body {
  display: flex;
  min-height: 100vh;
  margin: 0;
  background-image: url(https://picsum.photos/id/239/1000/2000), url(https://picsum.photos/id/238/1000/2000);
  background-size: cover;
  background-position: center;
}

.btn {
  margin: auto;
  padding: 1em 2em;
}

body:has(.btn:hover) {
  background-image: url(https://picsum.photos/id/238/1000/2000);
}

<button class="btn">Click me!</button>

Чтобы картинка затемнялась, это же совсем легко. Неужели сами бы не догадались?

UP: Обнаружил интересный баг в Firefox. Для его устранения обернул кнопку в div. В Chrome этого не требуется.

body {
  display: flex;
  min-height: 100vh;
  margin: 0;
  background-image: url(https://picsum.photos/id/234/1000/2000);
  background-size: cover;
  background-position: center;
}

.btn-wrapper {
  margin: auto;
}

.btn {
  padding: 1em 2em;
}

.btn-wrapper:hover {
  box-shadow: 0 0 0 200vw rgb(0, 0, 0, .5), 0 0 0 10px rgb(0, 0, 0, .5) inset;
}

<div class="btn-wrapper">
  <button class="btn">Click me!</button>
</div>

БЛОГ НА HUSL

как поменять фон при наведении на кнопку(без Javascript)

Ответы (1 шт):