Hover event handler may be conflicting with CSS hover

Hover event handler may be conflicting with CSS hover

Hi all,


I'm using a mix of both jQuery and CSS hover states on the same class that's assigned to a list item.

The jQuery is replacing text on hover. The CSS is hiding a div and show an image on hover. 
My problem is that the jQuery hover event is causing the CSS hover to not work and I'm not quite sure why.

https://codepen.io/jordan_miguel/pen/qmypNW 
Have a look at the code and hover over the first and second list items to understand it better. 


Thanks