Using jquery for fade-in and fade-out results the mouse will flash

I used jquery TO MAKE A Fade-in and fade-out effect, that is, the mouse will fade into a layer (there is only one background image and a few texts in the layer), move the mouse away and fade out that layer.
However, as long as the mouse is placed on the li, the mouse pattern (hand, Arrow, And I-word) is constantly changing (flashing) and debugging has not been completed yet. Sometimes it does not flash, sometimes it will flash, I do not know why

Html:Copy to ClipboardReference: [www.bkjia.com] <ul class = "aaa">
<Li> <div> This is a light-in layer </div> <a> List 1 </a> </li>
<Li> <div> This is a light-in layer </div> <a> List 2 </a> </li>
<Li> <div> This is a light-in layer </div> <a> List 3 </a> </li> </ul>
Css:Copy to ClipboardReference: [www.bkjia.com]. aaa div {display: none}
Jquery:Copy to ClipboardReference: [www.bkjia.com] $ (". aaa li"). hover (function (){
$ (This). find (div). fadeOn (800)
},
Function (){
$ (This). find (div). fadeOn (200)
})

// Added a code to remove the focus.
$ ("A"). focus (function (){
If (this. blur) {this. blur ();}
})