3
Following code:
<script>
$(document).ready(function() {
$("#inicio").hover(function() {
$("#inicio").addClass("fogo");
$("#inicio").removeClass("fogo");
});
});
</script>
And the HTML:
<li><a id="inicio">Inicio</a></li>
in class*(.fire)*, I entered these CSS codes, basically it displays a gif and positions it.
<style>
.fogo {
background-image: url("http://www.bestgraph.com/gifs/paysages/flammes/flammes-10.gif");
background-position: 0px center;
}
</style>
Forget styling, I removed the css to make it easier to visualize the code. I tested it here, and by hovering the mouse over "a," it gets a class, empty, leaving something like:
<li><a id="inicio" class="">Inicio</a></li>
What do I do to simply put the class . fire in the element, and when leaving the mouse remove it? For me basically using Hover, and two functions, the first to input the mouse on the element, and the other working on the output.. Grateful!
Hello, I managed to fix the problem, actually it was just the misuse of the Hover. With the event I do the same thing that friends there suggested, only with less code! It asks for two functions, the first for when the mouse is on top of the element(mouseenter) and the second function is for when the mouse leaves the element(mouseleave). Basically it looks like this: $("#start"). Hover(Function() { $("#start").addClass("fire");}, Function() { $("#start").removeClass("fire");} ); See you later, thank you all!
– Ale