a href is not working

Hi I have an interactive map. as shown in the photo:

https://i.stack.imgur.com/uf7Kk.png

When I hover any place, it gives me information about that place, by the use of JavaScript code below i used this class for doing so: cd-popup-trigger I want to make all these icon clickables by the use of "a href=" but href is not working because of the script, i use the following code in the view:

<!-- Hiking -->
             <div class="map1 targetDiv cd-popup-trigger" id="div1" style="display:block;">
                <div class="map-div">
                    <img src="frontend/assets/images/map1.png" alt="" class="img-fluid map-img">
                     <img src="frontend/assets/images/map1.png" class="img-fluid icon icon10 cd-popup-trigger" data-id="Pop_Ministry_10"  />
                     <!-- these are the icons -->
                    <a href="/"><!--I applied the href here-->
                    <img src="frontend/assets/images/hikingicon.png" class="img-fluid icon icon10 cd-popup-trigger" data-id="Pop_hiking_8"/>
                     </a>
                    <a href="/"><img src="frontend/assets/images/hikingicon.png" class="img-fluid icon icon9 cd-popup-trigger" data-id="Pop_hiking_9" /></a>
                    <a href ="/"><img src="frontend/assets/images/hikingicon.png" class="img-fluid icon icon6 cd-popup-trigger" data-id="Pop_hiking_10" /></a>
                </div>
            </div>

I used this JavaScript > that is why href is not clickable:

<script>


        // filter click event
        $(".mapFilter-item").on("click", function () {
            var _this = $(this);
            ActiveTab = _this.attr("data-type");

            $(".mapFilter-item").removeClass("is-mapFilterActive");
            _this.addClass("is-mapFilterActive");

        });

//for filter

        jQuery(function () {
            jQuery('.showSingle').click(function () {
                jQuery('.targetDiv').hide();
                jQuery('#div' + $(this).attr('target')).show();
            });
        });




//for alart
jQuery(document).ready(function($){
        //open popup
    $('.icon.cd-popup-trigger').mouseenter(function () {

                $('.cd-popup').removeClass('is-visible');
                divId = $(this).attr('data-id');
                event.preventDefault();
                $('#' + divId).addClass('is-visible');
            //event.preventDefault();
            //$('.cd-popup').addClass('is-visible');
    });


    $('.icon.cd-popup-trigger').click(function () {

        $('.cd-popup').removeClass('is-visible');
        divId = $(this).attr('data-id');
        event.preventDefault();
        $('#' + divId).addClass('is-visible');
        //event.preventDefault();
        //$('.cd-popup').addClass('is-visible');
    });

        //close popup
        $('.cd-popup').on('click', function(event){
            if( $(event.target).is('.cd-popup-close') || $(event.target).is('.cd-popup') ) {
                    event.preventDefault();
                    $(this).removeClass('is-visible');
            }
        });
        //close popup when clicking the esc keyboard button
    $(document).keyup(function (event) {

        if(event.which=='27'){
            $('.cd-popup').removeClass('is-visible');
            }
    });

});

Is there any way to let a href works and when hover it the script works




    </script>