Наведите указатель мыши и измените треугольник сверху

Question

У меня есть коробка с треугольником прямо сверху. Оба цвета окрашены одинаково, но при наведении курсора цвет треугольника остается без изменений.

Как изменить цвет треугольника? [введите описание ссылки здесь] [1]

.vw-post-box-read-more { 
    position: absolute; 
    right: 0; 
    top: 0; 
    bottom: 0; 
    line-height: 1em; 
    padding: 20px 15px 15px 15px; 
    -webkit-transition: all 0.2s ease-out; 
    -moz-transition: all 0.2s ease-out; 
    transition: all 0.2s ease-out; 
    background-color: #393939; 
    /*background-color: rgba(255, 255, 255, 0.15);*/ 
} 
.vw-post-box-read-more .triangle { 
    width: 0; 
    height: 0; 
    border-style: solid; 
    border-width: 0 10px 10px 10px; 
    -webkit-transition: all 0.2s ease-out; 
    -moz-transition: all 0.2s ease-out; 
    transition: all 0.2s ease-out; 
    border-color: transparent transparent #393939 transparent; 
} 

<div class="triangle"></div> 
<a class="vw-post-box-read-more" href=""> 
    <span>Read More</span> 
    <i class="vw-icon icon-iconic-right-circle"></i> 
</a> 

EDIT: Себастьян Олсен помог мне, спасибо

Answer 1

Вы пытаетесь стиль треугольник, как если бы он был ребенком vw-post-box-read-more

Попробуйте этот код:

.vw-post-box-read-more { 
 
    line-height: 1em; 
 
    padding: 20px 15px 15px 15px; 
 
    -webkit-transition: all 0.2s ease-out; 
 
    -moz-transition: all 0.2s ease-out; 
 
    transition: all 0.2s ease-out; 
 
    background-color: #393939; 
 
    /*background-color: rgba(255, 255, 255, 0.15);*/ 
 
} 
 
.triangle { 
 
    width: 0; 
 
    height: 0; 
 
    border-style: solid; 
 
    border-width: 0 10px 10px 10px; 
 
    -webkit-transition: all 0.2s ease-out; 
 
    -moz-transition: all 0.2s ease-out; 
 
    transition: all 0.2s ease-out; 
 
    border-color: transparent transparent #393939 transparent; 
 
    margin-bottom: 20px; 
 
} 
 
.hover-box:hover > .vw-post-box-read-more { 
 
    background-color: red; 
 
} 
 

 
.hover-box:hover > .triangle { 
 
    border-color: transparent transparent red transparent; 
 
}

<div class="hover-box"> 
 
<div class="triangle"></div> 
 
<a class="vw-post-box-read-more" href=""> 
 
    <span>Read More</span> 
 
    <i class="vw-icon icon-iconic-right-circle"></i> 
 
</a> 
 
    </div>