I made a button compose by two circle like this:

```js
$('.circle').mouseover(function(){
   $('.overlay').animate({opacity:0.7,}, 200);
  }); 
$('.circle').mouseout(function(){
 $('.overlay').animate({opacity:0}, 100);
});
```

```css
.overlay{
 position:absolute;
 background:black;
 width:100%;
 height:100%;
 opacity:0;
}

.circle{
 position:absolute;
 width:30px;
 height:30px;
 border:1px dashed #fc7945;
 border-radius:50px;
 cursor:pointer;
 z-index:99;
}

.circle-in{
 width:20px;
 height:20px;
 margin-top:2px;
 background:none;
 margin-left:2px;
 border:3px solid #fc7945;
 border-radius:50px;
 cursor:pointer;
}
```

```html
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="overlay"></div> 

<a><div class="circle">
         <div class="circle-in"></div>
        </div></a>
```

and i want that when i hover on it the overlay appear, so my problem is that when i hover on it there is a breakpoint between the first and the second circle and that make the overlay disappear and appear how can i fix it ?