如何在 div 悬停时更改跨度颜色

Question

我正在尝试更改 div 悬停时的跨度颜色

如何使红色汉堡包按钮（跨度）在 div 悬停时将颜色更改为黑色

PS：现在它在 span 悬停时执行

.mobile-nav-toggle {
    height: 50px;
    width: 35px;
    margin-right: 31px;
    background: #ddd;
    display: flex;
    align-items: center;
    cursor: pointer; }
    .mobile-nav-toggle span,
    .mobile-nav-toggle span::before,
    .mobile-nav-toggle span::after {
        border-radius: 2px;
        content: "";
        display: block;
        height: 6px;
        width: 100%;
        background: rgba(177, 66, 66, 0.8);
        position: relative; }
    .mobile-nav-toggle span::before {
        top: 11px; }
    .mobile-nav-toggle span::after {
        bottom: 17px; }
        .mobile-nav-toggle span:hover,
        .mobile-nav-toggle span:hover:before,
        .mobile-nav-toggle span:hover:after {
            background: rgba(0, 0, 0, 0.8); }

<div class="mobile-nav-toggle">
    <span></span>
</div>

Answer 1

为 div 使用悬停伪选择器而不是 span。

这是您需要使用的选择器

    .mobile-nav-toggle:hover span,
    .mobile-nav-toggle:hover span::before,
    .mobile-nav-toggle:hover span::after {
        background: rgba(0, 0, 0, 0.8); }

Here 是 fiddle。

Answer 2

更改您的 hover 规则，

来自这个：

.mobile-nav-toggle span:hover,
.mobile-nav-toggle span:hover:before,
.mobile-nav-toggle span:hover:after {
    background: rgba(0, 0, 0, 0.8); 
}

对此：

.mobile-nav-toggle:hover span,
.mobile-nav-toggle:hover span:before,
.mobile-nav-toggle:hover span:after {
    background: rgba(0, 0, 0, 0.8); 
}

原因：当您在 span 的 hover 及其 pseudo-elements 上创建规则时，只有悬停在其上的规则才会应用样式。您需要在 div 上创建一个规则，这样每当您在 div 上 hover 时，children 都会获得样式。

Answer 3

这会起作用，

.mobile-nav-toggle:hover span,
.mobile-nav-toggle:hover span:before,
.mobile-nav-toggle:hover span:after,
.mobile-nav-toggle span:hover,
.mobile-nav-toggle span:hover:before,
.mobile-nav-toggle span:hover:after {
 background: rgba(0, 0, 0, 0.8); }

如何在 div 悬停时更改跨度颜色

How to change span color on div hover

css

swap

colors

button

onhover