Question

有人知道如何使用jquery制作这些悬停效果吗？ https://tympanus.net/Development/CreativeButtons/

谢谢，我正在努力学习，我不需要购买或下载表单

我刚刚对它进行了分析，看起来有一个元素：

p部分按钮（我发现的是一种更好的中心方式，非常好）

按钮的类：

.btn

基本悬停效果的普通伪类：

.btn：悬停

jquery动画的伪类：

.btn：后

我不明白的是如何动画.btn：使用jquery后

这里我有一个参考表，我正在为自己做的，你可以尝试（css不干，因为它是一个参考表，将来我可以用它来查看一个特定的对象，类重用或修改 https://codepen.io/Heavybrush/pen/bWgXpx

我尝试使用

$(".btn2").hover(
  function() {
    $(this).stop().animate({height: "80px"},300);
  },
  function() {
    $(this).stop().animate({height: "0"},300);
  }
);

用“.btn2：after”改变它，但它不起作用

Answer 1

似乎js / jq无法获取伪元素。所以你不能像普通元素那样为伪元素设置动画。

你应该在css中为伪元素设置动画，如

.btn::after{
}

.btn:hover::after{
}

如果动画是动态生成的。你可以像

一样创建它

var style = document.createElement('style');
style.innerText = '...animation style';
document.head.append(style);

如何使用以下符号设置悬停按钮的动画：在伪类和jquery之后？

1 个答案: