传输postMessage无法处理链接悬停颜色实时预览

Question

尝试使用transport="postMessage"。遇到一个特定问题：悬停，正如我在代码之后描述的那样。

php代码如下：

<?php
function airspace_custom_link_color(){
  $test_color       =  get_theme_mod('test_color');
  $test_hover_color =  get_theme_mod('test_hover_color');
    ?>

    <style type="text/css">

        .navigation .navbar .navbar-nav  li  a {
          color : <?php echo $test_color;  ?> ;
        }
        .navigation .navbar .navbar-nav  li  a:hover{
         color : <?php echo $test_hover_color; ?> ;

        }

    </style>

<?php
}
add_action( 'wp_head', 'airspace_custom_link_color' );

js代码如下：

//link color
    wp.customize( 'test_color', function( value ) {
        value.bind( function( newval ) {
            $('.navigation .navbar .navbar-nav  li  a').css('color', newval );
        } );
    } );


    //link hover color
    wp.customize( 'test_hover_color', function( value ) {
        value.bind( function( to ) {
            var el;
                $('.hover-styles').remove();
                el = '<style type="text/css" class="hover-styles">.navigation .navbar .navbar-nav  li  a:hover { color: ' + to + '; }</style>'; // build the style element
                 $( 'head' ).append( el);

        } );
    } );

as：hover是一个伪元素，因此必须在DOM上添加样式。问题是悬停颜色正在改变而没有按预期刷新，但如果我更改链接颜色，则悬停颜色不起作用。