Hover box and change triangle on top - html

Question

I have a box with a triangle directly on top. Both are colored the same but upon hovering the box, the triangle's color remains without changing.
How can I change the color of the triangle?
[enter link description here][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: Sebastian Olsen helped me, thank you

Answer 1

You're trying to style the triangle as if it was a child of vw-post-box-read-more
Try this code:
.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>