如何更改 div 悬停时的跨度颜色答案

【问题标题】：How to change span color on div hover如何更改 div 悬停时的跨度颜色
【发布时间】：2016-01-02 01:17:28
【问题描述】：

我正在尝试更改 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>

【问题讨论】：

标签： css button colors swap onhover

【解决方案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 是小提琴。

【讨论】：

谢谢 Laxmikant Dange，我想问一下为什么您将 2 列彼此相邻而不是仅包含 1 列。因为它也仅适用于一列。请给我投票好吗？
Hey Laxmikant Dange，您在写评论时如何进行线路制动？谢谢
@sparrow，请参考developer.mozilla.org/en-US/docs/Web/CSS/%3A%3Aafter
谢谢，我现在明白了双列是css3属性，嘿，你写评论的时候怎么行刹车？
@sparrow，这是关于 stackoverflow cmets 的吗？那么你可以在meta.stackoverflow.com 上问这个问题。其实我也没有意识到这一点。 :P

【解决方案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 及其伪元素上创建规则时，只有您将鼠标悬停在上面的元素才会应用样式。您需要在div 上创建一个规则，以便每当您在hover 上div 时，孩子们都会获得样式。

【讨论】：

谢谢 Abhitalks，您的回答正是我想要的。你能给我投票吗？有帮助，再次感谢您

【解决方案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); }

【讨论】：

谢谢你 Sanjay Bhardwaj，你的回答也很好，它不像 Abhitalks 和 Laxmikant Dange'e 的回答那么优雅，但另一方面它让我知道如何改变 div 和 span 的颜色分别你能给我投票吗？
也谢谢你，我已经了解了两个单独的悬停管理。我投票给你。