Add event listeners for the mouseover and mouseleave events…
JQuery using css() method:
EDIT You wanted a fade, sorry use fadeIn() and fadeOut()
let $menu = $('.shop-menu');
let $show = $('#shop-menu-div');
$menu.mouseover(function() {
$show.fadeIn('slow');
})
$menu.mouseleave(function() {
$show.fadeOut('slow');
})#shop-menu-div {
display: none;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<li class="shop-menu"><a href="{{url('shop')}}">shop</a></li>
<div id="shop-menu-div">Show this div on hover</div>JQUERY: You could also toggle between classes as well using a CSS transition for your opacity
let $menu = $('.shop-menu');
let $show = $('#shop-menu-div');
$menu.mouseover(function() {
$show.addClass('block').removeClass('none');
})
$menu.mouseleave(function() {
$show.removeClass('block').addClass('none');
}).none {
-webkit-transition: opacity .5s ease-in-out;
-moz-transition: opacity .5s ease-in-out;
-ms-transition: opacity .5s ease-in-out;
-o-transition: opacity .5s ease-in-out;
opacity: 0;
}
.block {
-webkit-transition: opacity .5s ease-in-out;
-moz-transition: opacity .5s ease-in-out;
-ms-transition: opacity .5s ease-in-out;
-o-transition: opacity .5s ease-in-out;
opacity: 1;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<li class="shop-menu"><a href="{{url('shop')}}">shop</a></li>
<div id="shop-menu-div" class="none">Show this div on hover</div>