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

Question

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

这是我的JS小提琴,谢谢.

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;
}

对鼠标悬停的影响