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

Question

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

https://ourspirit .tempurl.host/whats-happening-across-bc/

客户端希望按钮倾斜，因此我将阅读更多锚点包裹在两个 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%;
}

现在我试图做到这一点，以便当我添加时，“阅读更多”按钮上的文本变为白色将鼠标悬停在背景上。不只是在文字上。目前，如果您将鼠标悬停在文本上，它会变为白色（将鼠标悬停在 Divi 菜单中按钮上的设置），但如果我将鼠标悬停在背景上，文本将不可见，因为它仍然与背景颜色相同。

我已经尝试过：

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

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

Answer 1

选择父类到父类来覆盖CSS。

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