Mouseenter on Selector just added with click

by jberg

HTML

<div class="nav-block">
    <div class="nav-item closed">
    <div class="detail">Resources</div></div></div>

CSS

.nav-item.closed {background-color:blue; height:50px; color:#FFF;}
.nav-item.open {background-color:red; height:200px; color:#FFF;}
.detail {width:100%; height:100%; position:relative; cursor:pointer;}

JavaScript

$('.detail').click( function() {
     $('.nav-item').addClass('open').removeClass('closed');
    });

    $('.nav-item.open').mouseenter(
     function(){
      $('.nav-item').removeClass('open').addClass('closed');
    });