Анимация фона при наведении на элемент

Question

Как сделать так, чтобы при на воде на Login цвет фона тоже менял позицию как в кнопке:

Cразу на сайте:https://jsfiddle.net/dqmpwu68/3/

Или HTML:

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="main.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js" charset="utf-8"></script>
  </head>
  <body>
        <input type="submit" class="logbtn" value="Login">
  </body>
</html>

CSS:

body {
  min-height: 100vh;
  background-image: linear-gradient(120deg,#3498db,#8e44ad)
}

.logbtn{
  display: block;
  width: 100%;
  max-width:30%;
  height: 50px;
  border: none;
  background: linear-gradient(120deg,#3498db,#8e44ad,#3498db);
  background-size: 200%;
  color: #fff;
  outline: none;
  cursor: pointer;
  transition: .5s;
  /* Рамка */
  border-top-style: none;
  border-right-style: none;
  border-bottom-style: none;
  border-left-style: none;
  border: solid #222222;
}

.logbtn:hover{
  background-position: right;
}

Наверное здесь нужно задействовать js , но я его плохо знаю

Answer 1

Как вариант:

$('.logbtn').hover(function() {
$('body').addClass('body__active');
}, function() {
$('body').removeClass('body__active');
});

body {
  min-height: 100vh;
  background: linear-gradient(120deg, #3498db, #8e44ad, #3498db);
  background-size: 200%;
  transition: .5s;
}
.body__active {
background-position: right;
}

.logbtn {
  display: block;
  width: 100%;
  max-width: 30%;
  height: 50px;
  border: none;
  background: linear-gradient(120deg, #3498db, #8e44ad, #3498db);
  background-size: 200%;
  color: #fff;
  outline: none;
  cursor: pointer;
  transition: .5s;
  /* Рамка */
  border-top-style: none;
  border-right-style: none;
  border-bottom-style: none;
  border-left-style: none;
  border: solid #222222;
}

.logbtn:hover {
  background-position: right;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="submit" class="logbtn" value="Login">

Или ещё проще:

$(function() {
  $('.logbtn').hover(function() {
    $('body').toggleClass('body__active')
  });
});

body {
  min-height: 100vh;
  background: linear-gradient(120deg, #3498db, #8e44ad, #3498db);
  background-size: 200%;
  transition: .5s;
}

.body__active {
  background-position: right;
}

.logbtn {
  display: block;
  width: 100%;
  max-width: 30%;
  height: 50px;
  border: none;
  background: linear-gradient(120deg, #3498db, #8e44ad, #3498db);
  background-size: 200%;
  color: #fff;
  outline: none;
  cursor: pointer;
  transition: .5s;
  /* Рамка */
  border-top-style: none;
  border-right-style: none;
  border-bottom-style: none;
  border-left-style: none;
  border: solid #222222;
}

.logbtn:hover {
  background-position: right;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="submit" class="logbtn" value="Login">

И ещё один:

var Item = $(".logbtn");
var activeItem = $("body");
Item.hover(function() {
  activeItem.toggleClass("body__active");
});

body {
  min-height: 100vh;
  background: linear-gradient(120deg, #3498db, #8e44ad, #3498db);
  background-size: 200%;
  transition: .5s;
}

.body__active {
  background-position: right;
}

.logbtn {
  display: block;
  width: 100%;
  max-width: 30%;
  height: 50px;
  border: none;
  background: linear-gradient(120deg, #3498db, #8e44ad, #3498db);
  background-size: 200%;
  color: #fff;
  outline: none;
  cursor: pointer;
  transition: .5s;
  /* Рамка */
  border-top-style: none;
  border-right-style: none;
  border-bottom-style: none;
  border-left-style: none;
  border: solid #222222;
}

.logbtn:hover {
  background-position: right;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="submit" class="logbtn" value="Login">

БЛОГ НА HUSL

Анимация фона при наведении на элемент

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