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

您似乎对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 2

您真的不需要Javascript就能做到这一点。

我不确定您要查找的内容是什么，但是我会在.textContent上使用宽度/不透明度过渡（将鼠标悬停时），它的效果与您链接的页面非常相似。 / p>

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 3

这是一个使用纯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>

Answer 4

您不需要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

隐藏的文字动画无法正常工作

4 个答案: