如何改变DIV悬停跨度颜色 [英] How to change span color on div hover

问题描述

我试图改变跨度色div的悬停

如何使红色按钮汉堡包（这是跨度），以改变颜色为黑色div的悬停

PS：现在也能用于跨度的悬停

的jsfiddle： https://jsfiddle.net/bjjbqct8/

\r

\r

。移动-NAV拨动{\r
    高度：50像素;\r
    宽度：35px;\r
    保证金权：31px;\r
    背景：#ddd;\r
    显示：弯曲;\r
    调整项目：中心;\r
    光标：指针; }\r
    。移动-NAV拨动跨度，\r
    。移动-NAV曲肘跨度::之前，\r
    。移动-NAV曲肘跨度:: {后\r
        边界半径：2px的;\r
        内容：;\r
        显示：块;\r
        高度：6像素;\r
        宽度：100％;\r
        背景：RGBA（177，66，66，0.8）;\r
        位置：相对; }\r
    。移动-NAV曲肘跨度:: {前\r
        顶部：11像素; }\r
    。移动-NAV曲肘跨度:: {后\r
        底部：知识+; }\r
        。移动-NAV-切换跨度：悬停，\r
        。移动-NAV-切换跨度：悬停：之前，\r
        。移动-NAV-切换跨度：悬停：{后\r
            背景：RGBA（0，0，0，0.8）; }

\r

＆LT; D​​IV CLASS =移动导航拨动＆GT;\r
    ＆LT;跨度＆GT;＆LT; / SPAN＆GT;\r
＆LT; / DIV＆GT;

\r

\r

\r

解决方案

使用悬停伪选择器代替的div跨度。

这是你需要使用的选择

 。移动-NAV-切换：悬停跨度，
    。移动-NAV-切换：悬停跨度::之前，
    。移动-NAV-切换：悬停跨度:: {后
        背景：RGBA（0，0，0，0.8）; }
 

这里是小提琴。

I am trying to change color of span on div's hover

How to make the red hamburger button (which is span) to change the color to black on div's hover

PS: Right now it does it on span's hover

JSFiddle: https://jsfiddle.net/bjjbqct8/

.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>

解决方案

Use hover psuedo selector for div instead span.

This is the selector you need to use

    .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 is fiddle.

这篇关于如何改变DIV悬停跨度颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！