Скрытая текстовая анимация работает неправильно

Question

Я хочу сделать страницу, похожую на эту: https://lp.anzi.kr/?page=listeners. Когда вы наводите курсор на кнопку, она перемещается вверх, и некоторый текст будет отображаться с фоном.

Я пытаюсь сделать это с помощью следующего кода: https://jsfiddle.net/rcv8b0kh/3/

$button = document.querySelector('button');
$textcontent = document.querySelector('.textcontent');

if ($button.hover) {
  $textcontent.classList.add('active')
}

button {
  background-color: red;
  border-radius: 50%;
  width: 10rem;
  height: 10rem;
}

button:hover {
  box-shadow: 0px 4rem 6rem -2rem rgba(0, 0, 0, 0.57);
  -moz-box-shadow: 0px 2px 40px -10px rgba(0, 0, 0, 0.57);
  transform: translateY(-3.5rem);
  transition: all .3s ease 0s;
  border: none;
}

.textcontent {
  visibility: hidden;
}

.active {
  visibility: 1;
  transform: translateY(-3.5rem);
  transition: all .3s ease 0s background-color: black;
  color: white
}

<div>
  <button>
</button>
  <div class="textcontent">
    <p>some text</p>
  </div>
</div>

Я также вижу людей, использующих ::before и ::after для такого рода анимаций, но я не знаю, как их реализовать здесь.

Answer 1

вам не нужен js, чтобы сделать это, это простой метод css

<div>
  <button class="hoverbtn" id="hoverbtn">
  </button>
  <div id="textcontent" class = "textcontent">
    <span>some text</span>
  </div>
</div>

, а вот css, чтобы скрыть и показать текст

Если второй элемент находится непосредственно внутри контейнера:

#hoverbtn:hover > #textcontent { opacity : 1 }

Если второй элемент находится рядом с (после закрывающего тега контейнера) контейнера:

#hoverbtn:hover + #textcontent { opacity : 1 }

Если второй элемент находится где-то внутри контейнера:

#hoverbtn:hover #textcontent { opacity : 1 }

Если второй элемент является родственником контейнера:

#hoverbtn:hover ~ #textcontent { opacity : 1 }

, так вот ваш css:

.hoverbtn {
  background-color: red;
  border-radius: 50%;
  width: 10rem;
  height: 10rem;
}

.hoverbtn:hover {
  box-shadow: 0px 4rem 6rem -2rem rgba(0, 0, 0, 0.57);
  -moz-box-shadow: 0px 2px 40px -10px rgba(0, 0, 0, 0.57);
  transform: translateY(-3.5rem);
  transition: all 0.3s ease 0s;
  border: none;
}

.textcontent {
  opacity: 0;
}

.hoverbtn:hover+.textcontent {
  opacity: 1;
}

ссылка: https://stackoverflow.com/a/4502693/6550949

Answer 2

Вы, похоже, путаетесь между javascript и jquery.Однако я не думаю, что ($button.hover) было бы допустимым условием либо.

button = document.querySelector('button');
textcontent = document.querySelector('.textcontent');
button.addEventListener('mouseover', handlerIn)
button.addEventListener('mouseout', handlerOut)

function handlerIn() {
  textcontent.classList.add('active')
}

function handlerOut() {
  textcontent.classList.remove('active')
}

button {
  background-color: red;
  border-radius: 50%;
  width: 10rem;
  height: 10rem;
}

button:hover {
  box-shadow: 0px 4rem 6rem -2rem rgba(0, 0, 0, 0.57);
  -moz-box-shadow: 0px 2px 40px -10px rgba(0, 0, 0, 0.57);
  transform: translateY(-3.5rem);
  transition: all .3s ease 0s;
  border: none;
}

.textcontent {
  opacity: 0;
  transition: opacity  0.2s linear;
}

.active {
  opacity: 1;
}

<div>
  <button>
</button>
  <div class="textcontent">
    <p>some text</p>
  </div>
</div>

Answer 3

Вам действительно не нужен Javascript для этого.

Я не совсем уверен, что вы ищете, но я бы использовал переход ширины / непрозрачности для .textContent (когда наведена кнопка), и он дает очень похожие результаты на вашей страницесвязаны.

button {
  background-color: red;
  border-radius: 50%;
  border: none;
  width: 10rem;
  height: 10rem;
  transition: all .3s ease 0s; 
}

button:hover {
  box-shadow: 0px 3rem 4rem -2rem rgba(0, 0, 0, 0.57);
  -moz-box-shadow: 0px 3rem 4rem -2rem rgba(0, 0, 0, 0.57);
  transform: translateY(-3.5rem);
  transition: all .3s ease 0s;
  border: none;
}

.textcontent p{
  width:0px;
  opacity:0;
  transition: opacity .3s ease 0s; 
}

button:hover + .textcontent p{
  width:200px;
  opacity:1;
  transition: all .3s ease 0s; 
}

<div>
  <button>
</button>
  <div class="textcontent">
    <p>some text</p>
  </div>
</div>

Answer 4

Вот решение с чистым CSS и :after псевдоэлементом:

div {
  position: relative;
  width: 10em;
}
p {
  text-align: center;
  transform: translateY(4rem);
}
p:after {
  content: "";
  display: block;
  background-color: red;
  border-radius: 50%;
  width: 10rem;
  height: 10rem;
  transition: all .3s ease 0s;
  transform: translateY(-5rem);
}
div:hover p:after {
  transform: translateY(-12rem);
}

<div>
  <p>some text</p>
</div>