Menü alt elemanı üzerine gelince resim değişmesi

<ul>
    <li class="megamenu submenu">
        <a href="javascript:void(0);" class="show-submenu-mega">Pages</a>
        <div class="menu-wrapper">
            <div class="row small-gutters">
                <div class="col-lg-3">
                    <h3>###</h3>
                    <ul>
                        <li><a href="#">Link 1</a></li>
                        <li><a href="#">Link 2</a></li>
                        <li><a href="#">Link 3</a></li>

                    </ul>
                </div>

                <div class="col-lg-3 d-xl-block d-lg-block d-md-none d-sm-none d-none">
                    <div class="banner_menu">
                        <a href="#0">
                            <img src="img/banner_menu.jpg" width="400" height="550" alt="" class="img-fluid lazy">
                        </a>
                    </div>
                </div>
            </div>
            <!-- /row -->
        </div>
        <!-- /menu-wrapper -->
    </li>
</ul>