Question

我想在div的悬停上改变span的颜色

如何使红色汉堡包按钮（跨度）在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

将hover psuedo选择器用于div而不是span。

这是您需要使用的选择器

show

Here是小提琴。

Answer 2

更改GlassFish Server Open Source Edition 4.1 (13) startup time : Felix (5,662ms), startup services(39,218ms), total(44,880ms) Info: Grizzly Framework 2.3.15 started in: 3ms - bound to [/0.0.0.0:7676] Info: Registered com.sun.enterprise.glassfish.bootstrap.osgi.EmbeddedOSGiGlassFishImpl@194ccbc as OSGi service registration: org.apache.felix.framework.ServiceRegistrationImpl@18948cd. Info: JMXStartupService has started JMXConnector on JMXService URL service:jmx:rmi://admin-PC:8686/jndi/rmi://admin-PC:8686/jmxrmi规则，

来自：

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); } hover及其伪元素上创建规则时，只有您悬停在其上的规则才会应用这些样式。您需要的是在span上创建规则，以便只要您div hover，孩子就会获得这些样式。

Answer 3

这将有效，

div

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

3 个答案: