Question

这是我的第一个问题

我找不到答案。我一直在寻找各种主题，例如这些主题（例如）：

我想在悬停时触发的按钮上模拟一个闪亮效果（效果只是CSS，我从这个网站获取它：https://codemyui.com/pure-css-shining-button-hover-animation/），但是与其他事件一样，例如点击其他按钮或其他。根据我之前的主题研究，不可能触发悬停事件，因此解决方法是为该悬停CSS样式分配一个类，这就是我试图做的，但我不能让它发挥作用。

我认为问题是因为CSS有伪元素，如：在，：之前和：悬停，有时它们是组合

以下是代码：

CSS：

@import url(https://fonts.googleapis.com/css?family=Raleway:300);
.btnShine {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translateX(-50%) translateY(-50%);
          transform: translateX(-50%) translateY(-50%);
}

.btnShine {
  background: #333;
  color: #ccc;
  width: 200px;
  height: 60px;
  border: 0;
  font-size: 18px;
  border-radius: 4px;
  font-family: 'Raleway', sans-serif;
  -webkit-transition: .6s;
  transition: .6s;
  overflow: hidden;
}
.btnShine:focus {
  outline: 0;
}
.test1, .btnShine:before {
  content: '';
  display: block;
  position: absolute;
  background: rgba(255, 255, 255, 0.5);
  width: 60px;
  height: 100%;
  left: 0;
  top: 0;
  opacity: .5;
  -webkit-filter: blur(30px);
          filter: blur(30px);
  -webkit-transform: translateX(-100px) skewX(-15deg);
          transform: translateX(-100px) skewX(-15deg);
}
.test2, .btnShine:after {
  content: '';
  display: block;
  position: absolute;
  background: rgba(255, 255, 255, 0.2);
  width: 30px;
  height: 100%;
  left: 30px;
  top: 0;
  opacity: 0;
  -webkit-filter: blur(5px);
          filter: blur(5px);
  -webkit-transform: translateX(-100px) skewX(-15deg);
          transform: translateX(-100px) skewX(-15deg);
}
.test4, .btnShine:hover {
  background: #338033;
  cursor: pointer;
}
.test3, .btnShine:hover:before {
  -webkit-transform: translateX(300px) skewX(-15deg);
          transform: translateX(300px) skewX(-15deg);
  opacity: 0.6;
  -webkit-transition: .7s;
  transition: .7s;
}
.test5, .btnShine:hover:after {
  -webkit-transform: translateX(300px) skewX(-15deg);
          transform: translateX(300px) skewX(-15deg);
  opacity: 1;
  -webkit-transition: .7s;
  transition: .7s;
}

HTML：

<button id="btn">Simulate a hover on the Stylized button</button>
<!--this shine effect was taken from this url https://codemyui.com/pure-css-shining-button-hover-animation/-->
<button class="btnShine">hover</button>

JS / JQuery：

$("#btn").on("click", function(){
    //$(".btnShine").trigger("mouseenter");
  //$(".btnShine").trigger("hover");
  //$(".btnShine").trigger("mouseover");
  //$(".btnShine").mouseover();
  $('.btnShine').addClass("test3"); 
  $('.btnShine').addClass("test4"); 
  $('.btnShine').addClass("test5"); 
/*
  $('.btnShine').removeClass("test5");
  $('.btnShine').removeClass("test4");
  $('.btnShine').removeClass("test3");
  */
});

我做了这个JSFiddle，所以你们可以理解我想要做的事情。

https://jsfiddle.net/kaedfegn/2/

PS：我是智利人，所以我的母语是西班牙语。

Answer 1

您忘了将:before和:after添加到所有测试类中。

所以，这个：

.test1, .btnShine:before

应该是这样的：

.test1:before, .btnShine:before

请参阅updated fiddle

我会考虑将所有“测试”类添加到一个类中，并围绕该类编写样式。我将所有这些内容合并在this fiddle中称为.shine。

所以选择器看起来像这样：

.btnShine.shine, .btnShine:hover {
  background: #338033;
  cursor: pointer;
}

.btnShine.shine:before, .btnShine:hover:before {
  -webkit-transform: translateX(300px) skewX(-15deg);
          transform: translateX(300px) skewX(-15deg);
  opacity: 0.6;
  -webkit-transition: .7s;
  transition: .7s;
}

.btnShine.shine:after, .btnShine:hover:after {
  -webkit-transform: translateX(300px) skewX(-15deg);
          transform: translateX(300px) skewX(-15deg);
  opacity: 1;
  -webkit-transition: .7s;
  transition: .7s;
}

模拟在悬停事件上执行的按钮的闪光效果，但与其他事件一起使用

1 个答案: