在wordpress中更改按钮悬停状态的问题答案

【问题标题】：Problem with changing button hover state in wordpress在wordpress中更改按钮悬停状态的问题
【发布时间】：2021-12-20 20:26:33
【问题描述】：

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

codepen.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 不想更改颜色或创建 before 伪类。在开发工具中，我看到它可见但无法应用。

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

【问题讨论】：

寻求代码帮助的问题必须包括在问题本身中重现它所需的最短代码，最好是在堆栈片段中。尽管您提供了一个链接，但如果它变得无效，那么您的问题对于未来遇到同样问题的其他 SO 用户将毫无价值。见Something in my website/example doesn't work can I just paste a link。

标签： html css wordpress

【解决方案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 example 的发光效果，那么你也需要添加这个...

.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;
  }
}

【讨论】：