I am using sliphover.js a jquery for direction aware hover effect. When the page is loaded, the hover effect only work when F12 is clicked or inpect element is activated in chrome and IE10. Once the developer mode is activated or already activated developer mode is closed then it starts working till the page is reloaded again. i am using a number of jquery plugins as follows.
<script src="js/jquery-1.11.0.min.js"></script>
<script src="js/jquery.sliphover.js"></script>
<script src="js/superfish.js"></script>
<script type="text/javascript" src="js/jquery.mmenu.js"></script>
<script src="js/jquery.singlePageNav.min.js"></script>
<script src="js/modernizr.min.js"></script>
<script src="js/jquery.flexslider.js"></script>
<script src="js/jquery.imagesloaded.js"></script>
<script src="js/custom.js"></script>
I am including custom.js code
$(function(){
$("#tiles").sliphover();
});
My html, i am also using wookmark plugin to make a gallery
<div id="main" role="main">
<ul id="tiles">
<!--
These are our grid items. Notice how each one has classes assigned that
are used for filtering. The classes match the "data-filter" properties above.
-->
<li data-filter-class='["london", "art"]' class="hello">
<img src="images/gallery-image1.jpg" title="<a href='http://google.com'>Loyal Cao</a>" >
</li>
<li data-filter-class='["london", "art", "sport"]' class="hello">
<img src="images/gallery-image2.jpg" >
</li>
<li data-filter-class='["london", "art", "paris"]' class="hello">
<img src="images/gallery-image3.jpg" >
</li>
<li data-filter-class='["london", "art", "paris"]' class="hello">
<img src="images/gallery-image4.jpg" >
</li>
<li data-filter-class='["london", "sport"]' class="hello">
<img src="images/gallery-image5.jpg" >
</li>
<li data-filter-class='["london", "art", "sport"]' class="hello">
<img src="images/gallery-image6.jpg" >
</li>
<li data-filter-class='["london", "paris"]' class="hello">
<img src="images/gallery-image7.jpg" >
</li>
<li data-filter-class='["london", "art", "paris"]' class="hello">
<img src="images/gallery-image8.jpg" >
</li>
<!-- End of grid blocks -->
</ul>
</div>
please help me solve this issue.
