html - 在wordpress中更改按钮悬停状态的问题

Question

我正在努力为 wordpress 中的按钮创建自定义悬停。我想创造这样的东西：

码笔.io

这是css中的效果，我正在努力实现：

.button-solid:before {
    content: "";
    background: #FF0033;
    border: solid 2px #FF0033;
    position: absolute;
    z-index: -1;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    transition: all 500ms cubic-bezier(0.445, 0.05, 0.55, 0.95);
}


.container .button-solid:hover:before {
    background: #b30024;
    border-color: #b30024; }

所以，我在我的按钮对象和开发工具中添加了一个自定义类，它看起来像这样：

这是我在主题自定义中的代码：

.et_pb_button_module_wrapper .et_pb_button:before {
    content: "";
    background: #FF0033;
    border: solid 2px #FF0033;
    z-index: -1;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    transition: all 500ms cubic-bezier(0.445, 0.05, 0.55, 0.95);
}
.et_pb_button_0_wrapper:hover:before {
    background: #b30024;
    border-color: #b30024;
}

但 IT 不想更改颜色或创建之前的伪类。在开发工具中，我看到它可见但无法应用。

另一方面，当我仅将类更改为et_pb_button_module_wrapper时，它可以正常工作，但会更改我不想更改的整个 div。

标签： htmlcsswordpress

Answer 1

您将整个包装器定位为悬停状态。

当然，您希望以悬停状态定位按钮，然后更新先前的 :before 背景和边框 css。

.et_pb_button {
    position: relative;
}

.et_pb_button:before {
    content: "";
    display: block;
    background: #FF0033;
    border: solid 2px #FF0033;
    z-index: -1;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    transition: all 500ms cubic-bezier(0.445, 0.05, 0.55, 0.95);
}

.et_pb_button:hover:before {
    background: #b30024;
    border-color: #b30024;
}

如果您想要按照codepen 示例的光泽效果，那么您也需要添加它...

.et_pb_button:after {
    content: "";
    display: block;
    background: #f3f3f3;
    border: solid 2px #f3f3f3;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 40px;
    transform: skewX(-30deg);
    z-index: -1;
    opacity: 0;
    transition: all 150ms cubic-bezier(0.445, 0.05, 0.55, 0.95);
}

.et_pb_button:hover:after {
    left: 79%;
    -webkit-animation-name: shine;
    animation-name: shine;
    -webkit-animation-duration: 200ms;
    animation-duration: 200ms;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
}

@keyframes shine {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 0.25;
  }
  50% {
    opacity: 0.25;
  }
  80% {
    opacity: 0;
  }
}