当鼠标悬停在主 DIV 上时，如何改变 :before 样式？

Question

我有一个看起来像对话框的

。主要的

是对话框，而:before则代表箭头。我想做的是当你在CSS中将鼠标悬停在

上时，也会更改:before。

这是我的代码：

.sidebar_image_box_newsfeed_user_info_comments { 
    color: #ffffff; 
    background-color: #2f2f2e;
    text-decoration: none; 
    -webkit-transition-property: background-color, color, text-decoration; 
    -webkit-transition-duration: 0.5s, 0.5s, 0.5s; 
}

.sidebar_image_box_newsfeed_user_info_comments:hover { 
    background-color: #3b3b3b; 
    color: #f3f3f3; 
    text-decoration: underline; 
}

.sidebar_image_box_newsfeed_user_info_comments:before { 
    content:""; position:absolute;
    bottom:-6px; right:0;
    border-width:0 0 6px 6px;
    border-style:solid;
    border-color:transparent #2f2f2e;
    text-decoration: none;
    -webkit-transition-property: background-color, color, text-decoration;
    -webkit-transition-duration: 0.5s, 0.5s, 0.5s;
}

- iosfreak

Answer 1

.sidebar_image_box_newsfeed_user_info_comments:hover:before {
   content: "I am new";
}

jsFiddle。

- alex

---

在Alex的回答基础上，你可以用url(image)来替换"I am new"，以显示一张图片。 - robx

这正是我在寻找的，谢谢！ - WorldOfEmre