子要素ホバーのときに、親要素から removeClass() する方法

お世話になります。JavaScript初学者です。よろしくお願い致します。

###実現したいこと
下記HTMLで、子要素の.userにホバーしたときに、親要素の.contentから.is_hoverをremoveClass()したいです。

###該当のHTML

<ul>
  <li>
    <div class="content">
      <p>できない</p>
      <div><div><div>
        <div class="user">一郎</div>
      </div></div></div>
    </div>
  </li>
</ul>

###試したjQuery
まず流れに沿って書いてみたのですが、「➁contentの中のuserにホバー」でのremoveClass()が効かない状況です。

/*
➀contentにホバー
*/
$(document).on('mouseover','li > .content', function(){
  $(this).addClass('is_hover');	
});
$(document).on('mouseout','li > .content', function(){
  $(this).removeClass('is_hover');	
});

/*
➁contentの中のuserにホバー
*/
$(document).on('mouseover','.content > .user', function(e){
  $(this).closest('.content').removeClass('is_hover'); // 効かない！
  $(this).addClass('is_hover');		
});
$(document).on('mouseover','.content > .user', function(e){
  $(this).removeClass('is_hover');	
});

/*
➂userにホバー
*/
$(document).on('mouseover','.user', function(){
  $(this).addClass('is_hover');	
});
$(document).on('mouseout','.user', function(){
  $(this).removeClass('is_hover');	
});

原因として思いついたことのは、「➁contentの中のuserにホバー」のアクションでも「➀contentにホバー」が作動してしまっているのではないか、ということです。

そこで次のようにe.stopPropagation();を追加してみたのですが、効果は得られませんでした。

/*
➁contentの中のuserにホバー
*/
$(document).on('mouseover','.content > .user', function(e){
  e.stopPropagation(); // 追加してみました
  $(this).closest('.content').removeClass('is_hover'); // やっぱり効かない！
  $(this).addClass('is_hover');		
});
$(document).on('mouseover','.content > .user', function(e){
  e.stopPropagation();
  $(this).removeClass('is_hover');	
});

###不思議なこと
さらに不思議なことがあります。HTMLには<div><div><div>という要素がありますが、この３つをなくすと、上のe.stopPropagation();を追加したバージョンでremoveClass()が効くようになるという点です。

###まとめ
ここまでの内容について、CSSをつけて見やすいものをご用意いたしました（https://jsfiddle.net/suh4rjnt/）ので、もしよろしければお試しいただき、ご回答を頂戴できませんでしょうか。