I have designed custom share buttons to enhance the appearance of the traditional like, tweet, pin, etc. However, I am facing an issue with hover functionality in a jsfiddle demo. The buttons almost function as intended, but I need the span element to remain out of the way during hover so that users can click on the button underneath without any hindrance. I have been unable to solve this problem on my own. Give the fiddle a try to better understand the issue.
HTML:
<div class="sharebuttons">
<ul>
<li id="tweet"><span></span><a href="">tweet</a></li>
<li id="like"><span></span><a href="">like</a></li>
<li id="pin"><span></span><a href="">pin</a></li>
<li id="plusone"><span></span><a href="">plusone</a></li>
</ul>
</div>
JS:
$(document).ready(function(){
$('.sharebuttons ul li span').hover(function(){
$(this).slideUp();
}, function(){
$(this).slideDown();
});
});
For a working demonstration, visit the fiddle link below