The problem is .lol
is not the next sibling of .test
it is the next sibling of next element.
You can use .siblings() if there is no other lol
element within the same parent
$(document).ready(function(){
$(".test").on({
mouseover: function(){
$(this).siblings('.lol').addClass('hide');
},
mouseout: function(){
$(this).siblings('.lol').removeClass('hide');
}
});
});
else use
$(this).next().next('.lol')....