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

Question

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

这是我的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

将箭头设置为第一个链接的before伪元素

示例小提琴：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;
}

---

对鼠标悬停的影响