我假设在线和离线都是指徽标的活动状态。我认为有几个选项可供您使用。前两个选项可以在主题中使用，然后只需更改目录中的图像文件。

选项一（不使用WP）：

您可以简单地使用透明度。对徽标应用透明效果，然后悬停，使不透明度完全。E、 g:

.logo {
    opacity: 0.75;
}

.logo:hover {
    opacity: 1;
}

// If you want to use SASS:

.logo {
    opacity: 0.75;

    &:hover {
        opacity: 1;
    }
}

选项二（不使用WP）：如果需要使用图像而不是悬停效果，则可以尝试以下操作（再次使用类）：

.logo {
    background-image: url(\'path/to/your-off-image.jpg\');
    background-repeat: no-repeat;
    background-size: cover;
    width: 200px; // Have to set a width/height in order for the background to appear
    height: 200px;
}

.logo:hover {
    background-image: url(\'path/to/your-on-image.jpg\');
    background-repeat: no-repeat;
    background-size: cover;
}

// If you want to use SASS:

.logo {
    background-image: url(\'path/to/your-off-image.jpg\');
    background-repeat: no-repeat;
    background-size: cover;
    width: 200px; // Have to set a width/height in order for the background to appear
    height: 200px;

    &:hover {
        background-image: url(\'path/to/your-on-image.jpg\');
        background-repeat: no-repeat;
        background-size: cover;
    }
}

选项三（使用WP中的customiser）：取自WP Customiser Docs

使用此选项，您必须使用以下内容注册设置：

function mytheme_customize_register( $wp_customize ) {
    //All our sections, settings, and controls will be added here

    $wp_customize->add_section( \'my_site_logo\' , array(
        \'title\'      => __( \'My Site Logo\', \'mytheme\' ),
        \'priority\'   => 30,
    ) );

    $wp_customize->add_control(
        new WP_Customize_Image_Control(
            $wp_customize,
            \'logo\',
            array(
               \'label\'      => __( \'Upload a logo\', \'theme_name\' ),
               \'section\'    => \'my_site_logo\',
               \'settings\'   => \'my_site_logo_id\' 
            )
        )
    );

}
add_action( \'customize_register\', \'mytheme_customize_register\' );

上述代码将添加到函数中。应该位于主题目录中的php文件。要检索图像，请执行以下操作：

get_theme_mod( \'my_site_logo_id\' );

然后，您必须打破使用内联样式输出徽标的两个不同选项的惯例，悬停。

请查看法典，查看您可能拥有的各种选项，以实现您的目标。