如何将悬停效果应用于由另一个元素触发的伪元素？-css教程-PHP中文网

如何将悬停效果应用于由另一个元素触发的伪元素？

Patricia Arquette

发布： 2024-11-19 14:11:02

原创

371 人浏览过

How to Apply Hover Effects to Pseudo Elements Triggered by Another Element?

为伪元素添加悬停效果

问题：

如何在伪元素上实现悬停效果，例如#element:before:hover，并通过将鼠标悬停在另一个元素上来触发悬停，例如#button:hover #element:before {...}?

仅 CSS 方法：

是的，可以纯粹使用 CSS 来实现此目的：

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

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

登录后复制

jQuery 方法：

如果您更喜欢 jQuery，这里有一个解决方案：

<div class="snippet" data-lang="js" data-hide="true">
<div class="snippet-code snippet-currently-hidden">
<pre class="snippet-code-css lang-css prettyprint-override">#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;}

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

<div>

登录后复制

$(function() {
    $("#button").hover(
        function () {
            $(this).find(":before").css("background-color", "red");
        },
        function () {
            $(this).find(":before").css("background-color", "blue");
        }
    );
});

登录后复制

以上是如何将悬停效果应用于由另一个元素触发的伪元素？的详细内容。更多信息请关注PHP中文网其他相关文章！