Is there a way to create a texture animation with text using CSS background GIFs that reload when hovered again? I've tried some JavaScript/jQuery but can't seem to make it work. Any suggestions?
I attempted the following approach, but it's not resetting the background:
$(document).ready(function() {
$(".hoverClass").mouseleave(function() {
$(this).removeClass("hoverClass");
setTimeout(function() {
$(this).addClass("hoverClass");
});
});
});.navMenu2 li {
color: #0e0e0e;
font-size: 10rem;
font-weight: 600;
list-style-type: none;
transition: background-image 2s ease-in-out;
}
.navMenu2 a {
text-decoration: none;
color: #0e0e0e;
}
.hoverClass:hover,
.hoverClass:focus {
-webkit-text-fill-color: transparent;
background: -webkit-linear-gradient(transparent, transparent), url(https://media.giphy.com/media/l2QDSTa6UcsRRSM5a/giphy.gif) repeat;
background: linear-gradient(transparent, transparent), url(https://media.giphy.com/media/l2QDSTa6UcsRRSM5a/giphy.gif) repeat;
-webkit-background-clip: text;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="navMenu2">
<ul>
<li class="liHver hoverClass">
<a href="index.html">
<span class="jap">作業</span>
<br>werk</a>
</li>
</ul>
</div>