jQueryのホバーイベントで、要素が階層化されている場合の処理について

Question

###実現したいこと
item1にホバーした場合 : item1だけにis_hover
item2にホバーした場合 : item1だけにis_hover
item3にホバーした場合 : item3だけにis_hover

###発生している問題
以下ができずに苦戦しています。

item2にホバーした場合 : item1だけにis_hover

###該当のソースコード
下記ソースコードを実行

<div class="item item1">
  <p>.item1</p>
  <div class="item item2">
    <p>.item2</p>
    <div class="attached">
      <div class="item item3">
        <p>.item3</p>
      </div>
    </div>
  </div>
</div>

.is_hover{background: red;}
.item{padding: 10px; border: 1px solid black;;}

$(document).on('mouseover','.item', function(e){
	e.stopPropagation();
	$('.is_hover').removeClass('is_hover');
	$(this).addClass('is_hover');
});
$(document).on('mouseout','.item', function(e){
	e.stopPropagation();
	$(this).removeClass('is_hover');	
});

###試したこと
「item2のときには何もしたい」という分岐があればいいと思いまして、以下3行目に// 追加してみたのですが、すべてからクラスが外れるということになってしまいまして…

どうしたらいいのか教えて頂けませんでしょうか。

$(document).on('mouseover','.item', function(e){
	e.stopPropagation();
	if( $(this).hasClass('item2') ) return; // 追加
	$('.is_hover').removeClass('is_hover');
	$(this).addClass('is_hover');
});
$(document).on('mouseout','.item', function(e){
	e.stopPropagation();
	$(this).removeClass('is_hover');	
});

Answer 1

「item2のときには何もしない」つまり、
イベントの対象を.item1, .item3とすればいいのでは。

$(document).on('mouseover','.item1, .item3', function(e){
  e.stopPropagation();
  $('.is_hover').removeClass('is_hover');
  $(this).addClass('is_hover');

});
$(document).on('mouseout','.item1, .item3', function(e){
  e.stopPropagation();
  $(this).removeClass('is_hover');    
});

Comments

[uchiwa]

ありがとうございます。応用ができていませんでした…