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

I have a dropdown list menu with small triangle pointer, when I hover the first item I want the small triangle also change to black color.

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

This is my JS Fiddle, Thanks.

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

1 个解决方案

#1

Place the arrow as the before pseudoelement of the first link

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

Example fiddle: http://jsfiddle.net/ebcho06a/5/

例子: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;
}

---

Effect on mouseover

对鼠标悬停的影响