css - 我可以使用 :first-letter and the :hover selector together? 吗

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

最佳答案

是的,你可以

示例 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 中设置样式

关于css - 我可以使用 :first-letter and the :hover selector together? 吗,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19515536/

相关文章:

javascript - 如何使用 jQuery 基于 offset().top 操作 translateY()

css - 找出内联 css 的来源

jQuery:悬停时仅显示一个,而不是全部

css - 这是什么类型的 CSS 选择器?这是什么意思?

css - "top"表格元素样式未将表格向下移动到较低位置

jquery - bootstrap 3 单击带有子菜单的元素时隐藏主菜单并显示子菜单

html - 如何在 css 中为我的社交图标制作悬停效果?

Jquery弹出关闭按钮

CSS 选择器 : how to select non-element sibling node?

html - 仅当 parent 有特定的 sibling 时才将目标 child