1

这是一个小问题但很烦人（典型的网页设计），我的提交按钮上有颜色样式。我在 WordPress 中使用带有 OceanWP 主题的页面构建器 Elementor。站点 URL 是http://catalystweb.design（当然正在建设中）

问题是颜色似乎在 :active 和 :focus 状态下“静音”。它们正在被应用，但没有充满活力。

我正在链接到该问题的简短截屏视频（12 秒），其中包括我专门插入该页面的自定义 CSS。仅供参考，似乎需要 !important 标志来覆盖某些主题/构建器样式，这使得为什么它们在这种情况下没有完全应用更加令人费解。

您会看到按钮的悬停状态提供了我设置的颜色；但是在 :focus （使用选项卡）上它们是静音的，并且在 :active （单击时）上也是如此。

button[type=submit]:focus {
  border: 2px solid #63C1FF !important;
  background: #ffffff !important;
  color: #63C1FF !important;
}
button[type=submit]:active {
  border: 2px solid #ffffff !important;
  background: #63C1FF !important;
  color: #ffffff !important;
}

谢谢，任何见解表示赞赏！

4

1 回答 1

1

你的样式表在这里：http ://catalystweb.design/wp-content/plugins/elementor/assets/css/frontend.min.css?ver=1.8.8

悬停时有一个不透明度设置：

.elementor-button:focus,
.elementor-button:hover,
.elementor-button:visited {
    color: #fff;
    opacity: .9;
}

!important;你想如何解决这取决于你，如果你能避免的话，我不建议使用它：

.elementor-button:focus,
.elementor-button:hover,
.elementor-button:visited {
    opacity: 1 !important;
}

会起作用，或者更好的方法，例如

button.elementor-button:focus,
button.elementor-button:hover,
button.elementor-button:visited {
    opacity: 1;
}

会工作。你可以把它放在你的主样式表或定制器的附加 CSS 中，或者你一直在添加自定义 CSS 的任何地方。

于 2018-02-27T23:58:08.340 回答