Trying to change text color when hovering over container-CodePudding

I am trying to style read more buttons in a Divi blog here:

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

The client wants the buttons to be skewed, so I wrapped the read more anchor in two divs:

<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>

Then I styled the divs to skew the background, and then skew the text back to normal:

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

They then wanted a scrolling effect on the buttons which I added like so:

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

Now I'm trying to make it so that the text on the button 'Read More' changes to white when I hover over the background. Not just over the text. At the moment if you hover over the text it changes to white (hover settings on button in Divi menus), but if I hover over the background the text is invisible as it is still the same color as the background.

I have tried this:

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

But this does nothing. Any ideas?

CodePudding user response：

Select parent to parent class for overwrite the css.

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