你可以将悬停效果应用于 CSS 中的伪元素吗？-css教程-PHP中文网

你可以将悬停效果应用于 CSS 中的伪元素吗？

Patricia Arquette

发布： 2024-11-12 07:15:02

原创

1043 人浏览过

Can you Apply Hover Effects to Pseudo Elements in CSS?

伪元素的悬停效果

您已经有了一个包含父元素 (#button) 和伪元素 (#button) 的设置：前）。您想知道是否可以使用纯 CSS 或 jQuery 将悬停样式应用于伪元素。

CSS-Only Approach

将悬停效果应用于伪元素本身，使用以下语法：

#button:before:hover {
    /* Hover styles for the pseudo element */
}

登录后复制

示例：

#button:before {
    background-color: blue;
    content: "";
    display: block;
    height: 25px;
    width: 25px;
}

#button:before:hover {
    background-color: red;
}

登录后复制

悬停在另一个元素上的效果

要使伪元素响应悬停在另一个元素上，请使用以下 CSS：

#element-to-hover:hover #button:before {
    /* Hover styles for the pseudo element when the other element is hovered */
}

登录后复制

示例：

#button {
    display: block;
    height: 25px;
    margin: 0 10px;
    padding: 10px;
    text-indent: 20px;
    width: 12%;
}

#button:before {
    background-color: blue;
    content: "";
    display: block;
    height: 25px;
    width: 25px;
}

#parent-element:hover #button:before {
    background-color: red;
}

登录后复制

以上是你可以将悬停效果应用于 CSS 中的伪元素吗？的详细内容。更多信息请关注PHP中文网其他相关文章！