我可以一起使用:first-letter和:hover选择器吗?

时间:2013-10-22 10:38:54

标签: css hover css-selectors pseudo-element

我有第一个字母选择器工作,改变第一个字母的颜色,但当悬停该区域时,颜色与背景匹配,因此它变得不可见。这是代码工作的一部分

.nav-menu li a:first-letter {color:#b5b503;}

.nav-menu li a:first-letter {font-weight:bold;}


.nav-menu li a {


    color: #fff;
    display: block;
    font-size: 15px;
    line-height: 1;
    padding: 15px 20px;
    text-decoration: none;
}

这就是我想我应该添加.first-letter选择器的部分,但是无法找出它是如何已经是悬停选择器

.nav-menu li:hover > a,
.nav-menu li a:hover {

    background-color: #b5b503;
    color: #273664;
}

1 个答案:

答案 0 :(得分:1)

是的,你可以

示例CSS:

p:first-letter {
    font-size: 120%;   
}
p:hover:first-letter {
    color: white;
}

HTML:

<p>Hello world</p>

在这里演示:http://jsfiddle.net/LRFw8/1/

对于您的代码,您可以在.nav-menu li a:hover:first-letter

中设置样式