CSS - 悬停并更改三 Angular 形颜色

Question

我有一个带有小三 Angular 形指针的下拉列表菜单，当我悬停第一个元素时，我希望小三 Angular 形也变为黑色。

这是我的JS Fiddle ，谢谢。

CSS

.username .messages {
    position:absolute;
    margin:22px 0px 0px -70px;
    width:200px;
    max-height:auto;
    color:black;
    -webkit-box-shadow: 0 8px 6px -6px black;
    -moz-box-shadow: 0 8px 6px -6px black;
    box-shadow: 0 8px 6px -6px black;
}
.username .messages:before {
    content:'.';
    display:block;
    position:absolute;
    margin-left:-10px;
    left:50%;
    top:-18px;
    width:0;
    height:0;
    border:10px solid black;
    color:black;
    border-color:transparent transparent #fff;
}

Answer 1

将箭头放置在第一个链接的之前伪元素

fiddle 示例:http://jsfiddle.net/ebcho06a/5/

.messages a:first-child:before {
    content:'';
    display:block;
    position:absolute;
    margin-left:-10px;
    left:50%;
    top:-20px;
    width:0;
    height:0;
    border:10px solid black;
    color:black;
    border-color:transparent transparent #fff;
}

.messages a:first-child:hover:before {
    border-color:transparent transparent #000;
}

鼠标悬停时的效果