代码之家 › 专栏 › 技术社区 › BallpointBen

`:hover `伪类不适用于``,而`p:hover `适用于

pseudo-class hover css html

BallpointBen · 技术社区 · 3 年前

当我悬停在 <a> ,它正确地改变了颜色。但当我悬停在  ,什么都没发生。我不明白为什么  悬停时不会改变颜色。

如果我用 p:hover ,然后  悬停时响应正确(但当然 <a> 停止)。我怎样才能同时获得  以及 <a> 当只使用一条规则悬停时更改颜色?为什么这不只是意料之中的工作呢?

<html>
    <head>
        <style>
            :hover {
                background-color: black;
                color: white;
            }
        </style>
    </head>
    <body>
        <p>some text</p>
        <a href="https://stackoverflow.com">stackoverflow</a>
    </body>
</html>

_{对于未来的潜在编辑:这段代码不会在Stack Snippet中演示这个问题,因为它是由浏览器中的怪癖模式引起的,在Stack Snippets中是不可复制的}

1 回复 | 直到 3 年前

Alohci 3 年前

您的代码正在应用怪癖模式,因为它没有doctype。怪癖模式规范说:

4.1. The :active and :hover quirk

在怪癖模式中,匹配以下条件的复合选择器选择器必须不匹配与不匹配的元素:any链接选择器。[选择器4]

选择器使用:active或:hover伪类。

选择器不使用类型选择器。

选择器不使用属性选择器。

选择器不使用ID选择器。

选择器不使用类选择器。

选择器不使用除:active和:hover之外的伪类选择器。

选择器不使用伪元素选择器。

选择器不是函数伪类或伪元素的参数的一部分。

这个 :hover 选择器满足这些条件,所以它与p元素不匹配。

-3

SeyedSajjadNazari 3 年前

我试过你的代码,发现所有标签都使用了样式,并且主体会改变颜色。如果希望标记a和p的颜色更改为合适的颜色,则必须指定只有这两个标记同时更改颜色。

p:hover,a:hover{
color: red;
background-color: blue;
}

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

1 年前

Jamie · 在CSS链接的文件名中添加Jinja占位符

1 年前

ptownbro · 重叠分区标签,同时保持以下所有分区和内容就位

1 年前

Luke Frost IEng MIMechE · Bootstrap 5.3在Div中的项目位置没有如我所期望的那样显示

1 年前

Reegan · 使用Angular ngFor指令在html中渲染嵌套对象值

1 年前

wqyutv · 当找不到文件时,任何破坏错误的东西都不会出现,我该怎么解决这个问题?

1 年前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

1 年前

Gukkey · 在React中明确隐藏日期类型输入后,如果我单击父div,如何显示日期选择器?

1 年前

Lorenzo Bertolaccini · 在Angular项目中通过对话框后,在控制台中显示但在HTML中不显示的数据数组

1 年前

john Rizzo · 按钮背景颜色、悬停和活动状态存在问题

1 年前

`:hover `伪类不适用于`<p>`,而`p:hover `适用于