lightGallery hover box click right link

I am having a problem implementing lightGallery with my website. Here is the code for my site:

    <ul class="lightgallery">
        <li class="col-md-2 col-sm-6 col-xs-6" data-src="images/products/img1.jpg" data-sub-html="<h4>my image</h4>">
            <div class="blog-post triggerAnimation animated" data-animate="fadeInUp">
                <div class="item project-post">
                    <img src="images/products/img1.jpg">
                    <div class="hover-box">
                        <div class="inner-hover-box">
                            <h2>main product</h2>
                            <a href="products.php"><p><span>gallery</span></p><i class="fa fa-file-o"></i></a>
                            <a href="images/products/img1.jpg"><p><span>enlarge</span></p><i class="fa fa-search"></i></a>
                        </div>
                    </div>
                </div>
            </div>
        </li>
    </ul>

and this is my script:

jQuery(document).ready(function() {
    $('.lightgallery').lightGallery({
        thumbnail:true
    });
});

When I drag the mouse pointer on the image, a hover box appears; when I click each tag <a> (gallery link or enlarge in lightGallery) it works normally, but when I click another area of the hovered box, it fires the enlarge-image-in-lightGallery link. How can I make it so that when I click on any area of the hovered box, it fires my gallery link?