我正在嘗試在此處的 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;
}
但這無濟于事。有任何想法嗎？
uj5u.com熱心網友回復：
選擇父類到父類以覆寫css。
body div.post-content .blog-button-background:hover .blog-button-text a {
color: white!important;
}轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/435970.html