将鼠标悬停在容器上时尝试更改文本颜色

Question

我正在尝试在此处的 Divi 博客中设置阅读更多按钮的样式：

https://ourspirit.tempurl.host/whats-happening-across-b-c/

客户希望按钮倾斜，所以我将阅读更多锚点包装在两个 div 中：

<script type="text/javascript">
jQuery(function($){
    $( ".more-link" ).wrap( "<div class='blog-button-text'></div>" );
    $( ".blog-button-text" ).wrap( "<div class='blog-button-background'></div>" );
});
    
</script>

然后我将 div 样式设置为倾斜背景，然后将文本倾斜回正常：

.blog-button-background {
    
    height:45px;
    width:154px;
    display:flex;
    align-items:center;
    -ms-transform: skewX(-20deg);
  -webkit-transform: skewX(-20deg);
  transform: skewX(-20deg);
    border: 1px solid #b71d23;
    position: relative;
  transition: all .35s;
    display:flex;
    align-items:center;
    justify-content:center;
    

}

.blog-button-text {
    -ms-transform: skewX(20deg);
  -webkit-transform: skewX(20deg);
  transform: skewX(20deg);
 z-index:2;
    
}

然后他们想要我添加的按钮的滚动效果，如下所示：

.blog-button-background:after{
  position: absolute;
    background: rgb(183, 29, 35);
  content: "";
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  transition: all .35s;
    z-index:1;
}

.blog-button-background:hover:after{
  width: 100%;
}

现在我正在努力使按钮 'Read More' 上的文本在我将鼠标悬停在背景上时变为白色。不仅仅是文字。目前，如果您将鼠标悬停在文本上，它会变为白色（Divi 菜单中按钮上的悬停设置），但如果我将鼠标悬停在背景上，文本将不可见，因为它仍然与背景颜色相同。

我试过这个：

.blog-button-background:hover .blog-button-text a {
    color:white !important;
}

但这没有任何作用。有什么想法吗？

Answer 1

Select 父级到父级 class 用于覆盖 css。

body div.post-content .blog-button-background:hover .blog-button-text a {
    color: white!important;
}

将鼠标悬停在容器上时尝试更改文本颜色

Trying to change text color when hovering over container

css

wordpress

jquery

divi