Disable ghost links on hover content

On content that shows on hover, Android will auto click the link if targeted. This should delay the link function and re-enable once content is loaded.

by Virtual

HTML

<div class="container full-feature">
    <div class="row">
        <div class="col-sm-12">
            <div class="row table-row no-gutters imagegrid hoverblur">
                <div class="col-md-3 col-sm-4 col-xs-6 col-ts-12">
                    <img src="http://placehold.it/260x220?text=hoverme" alt="admissions image placeholder" />
                    <div class="hover-content">
                        <div class="table-center">
                            	<h2><a href="#">Arts and Culture</a></h2>

                            <p>	<a href="#">Credibly embrace excellent sources before premium benefits. Assertively extend. </a>

                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

CSS

.hoverblur > div { border:1px solid #f00;}
.hover-content { display:none;}

JavaScript

<!-- hover for tiles, prevents ghost click on mobile -->
	$(document).ready(function () {
	    $('.hoverblur.row > div').addClass('disablelinks');
	});

	$('.hoverblur.row > div').hover(function () {
	    $(this).children('.hover-content').fadeIn("fast", function (event) {
	        $(this).parent().removeClass('disablelinks');
	    });
	    event.preventDefault();
	});