子にホバーしたとき、親から「is_hover」を外したい

Question

###前提・実現したいこと
リストの親（.parent）にホバーしたらそれを示す「is_hover」を付与しています。

その子（a）にホバーしたときに、親から「is_hover」を取り外したいです。

###該当のソースコード
こちらがHTMLです。

<ul>
  <li>
    <div class="parent">
      <p>p1</p>
      <a>a1</a>
    </div>
  </li>
  <li>
    <div class="parent">
      <p>p2</p>
      <a>a2</a>
    </div>
  </li>
</ul>

親に「is_hover」を付与するコードです。

$(document).on("mouseover","li > .parent", function(){
	$(this).addClass("is_hover");	
});
$(document).on("mouseout","li > .parent", function(){
	$(this).removeClass("is_hover");	
});

###試したこと
ひとまずできまして、子を.parent > aのように指定している方法です。

動作サンプル

$(document).on("mouseover",".parent > a", function(e){
	e.stopPropagation();
});

しかし実際には子にはaやらspanやらarticleやら、、と子はたくさんいるので、上のような方法では見栄えが悪く感じます。

このように１つずつ指定しなければならないためです。

$(document).on("mouseover",".parent > a, .parent > span, .parent > article", function(e){
    e.stopPropagation();
});

そこでお聞きしたいのですが、もう少し良い方法を伝授していただくことはできませんでしょうか？

それともこのような方法は普通なのでしょうか？

Answer 1

.parent * でよいのでは。

【全称セレクター - CSS: カスケーディングスタイルシート | MDN】
https://developer.mozilla.org/ja/docs/Web/CSS/Universal_selectors

Comments

[pariparipotato]

便利なものを知ってしまいました…ありがとうございます。

Answer 2

以下を追加してください

$(document).on("mouseover","li > .parent a", function(e){
  e.stopPropagation();
  $(this).closest('.parent').removeClass("is_hover");
});

補足

ちょっと命題とは違うようですが、補足

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function(){
  $(document).on("mouseover","li > .parent", function(){
    $(this).addClass("is_hover");    
  });
  $(document).on("mouseout","li > .parent", function(){
    $(this).removeClass("is_hover");    
  });
  $(document).on("mouseover","li > .parent a", function(e){
    e.stopPropagation();
    $(this).closest('.parent').removeClass("is_hover");
  });
});
</script>
<style>
.is_hover{background-Color:pink}
</style>

<ul>
  <li>
    <div class="parent">
      <p>p1</p>
      <a>a1</a>
    </div>
  </li>
  <li>
    <div class="parent">
      <p>p2</p>
      <a>a2</a>
    </div>
  </li>
</ul>

.parentにhover時でもaに乗ったときはis_hoverされないということ

Comments

[pariparipotato]

ありがとうございます。気を付けます。

[yambejp]

> 気を付けます。

いや、別に注意しているわけでなくて、ただ回答しただけです
aに乗ったときに親の.is_hoverを外している処理です。
ちょっと質問内容と回答があってなかったみたいですみません

[pariparipotato]

あっそうでしたか。「質問の動作サンプルのコードについて、１行追加したほうがいいよ」とご注意いただけたのかと思っていました。

動作サンプルのコードだけでも、a にホバーしたら .parent の色はピンク戻りますが、そちらの１行を追加するのが正しい処理なのんだなぁと、そのように思ったのですが…そういうわけではなかったですか？

[yambejp]

補足入れておきました

[pariparipotato]

補足ありがとうございます。やはりその１行は追加したほうがいいわけですね。横着せず気を付けます。

Answer 3

必ず<a>の先祖の<li>の下にある<div class="parent">が対象なら、

$('a').on('いべんと', function(){
  $(this).closest('li').find('.parent').removeClass('is_hover');
})

間違ってたらおかしかったら直して

Comments

[pariparipotato]

ありがとうございます。参考にさせて頂きます。