<li>
    <div class="header-navigation-item-state-wrapper">
        <div class="white">
                <h4 class="header-white">Collections</h4>

        </div>
        <div class="black">
                <h4 class="header-black">Collections</h4>

        </div>
    </div>
</li>

* {
    background:yellow
}
li {
    list-style:none;
}
.header-black {
    background:#000;
    color:#fff;
    padding:10px;
    display:block
}
.black {
    display:none;
}
.header-white {
    background:#fff;
    color:#000;
    padding:10px;
    display:block
}

$(document).ready(function () {
    $("li").mouseenter(function () {
        $(".white").css('display', 'none');
        $(".black").css('display', 'block');
    });
    $("li").mouseleave(function () {
        $(".white").css('display', 'block');
        $(".black").css('display', 'none');
    });
})