I want to create a simple game, where you have to traverse from one platform to another, without falling off the edges. Basically, the game starts when you hover over the first platform, and once you get to the final platform, you win. If you hover out at any point, you automatically lose. 

I'm working on my first prototype, and I can't seem to combine hover effects for multiple elements using the same class. Whenever I leave the first platform, the event fires despite the overlap with another element of the same class. Is there a way to prevent this? 

Here's my code: 

```js
$('.platform-win').mouseenter(function() {
  alert("You Win!");
});
$('.platform').mouseleave(function() {
  alert("You Lose!");
});
```

```css
    /*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);
}
```

```html
<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>
```