I have a vision for a fun game where players must navigate from one platform to another without falling off the edges. The game starts when you hover over the initial platform, and success is achieved by reaching the final platform. However, failure occurs if you accidentally hover out at any point during the game.
As I am developing my first prototype, I am facing difficulty combining hover effects for multiple elements that share the same class. Whenever I move away from the first platform, the event triggers even though there is another element of the same class nearby. Is there a workaround for this issue?
Below is a snippet of my code:
$('.platform-win').mouseenter(function() {
alert("You Win!");
});
$('.platform').mouseleave(function() {
alert("You Lose!");
}); /*Size & Positioning*/
.platform-container {
width: 1400px;
height: 700px;
position: relative;
}
.platform-win {
width: 90px;
height: 90px;
left: 1305px;
top: 605px;
position: absolute;
z-index: 1;
}
#one{
width: 1400px;
height: 100px;
position: absolute;
}
#two{
width: 100px;
height: 700px;
position: absolute;
left: 1300px;
}
/*Animations*/
/*Colors and Fonts*/
.platform-container {
background-color: grey;
}
.platform-win {
background-color: green;
}
#one{
background-color: rgba(255,0,0,0.5);
}
#two{
background-color: rgba(255,0,0,0.5);
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="platform-container">
<div class="platform-win"></div>
<div class="platform" id="one"></div>
<div class="platform" id="two"></div>
</div>