Почему я не могу выбрать элемент после его перемещения в элемент сетки?

Question

Я пытаюсь удалить эффект размытия изображения, содержащегося в элементе сетки, но похоже, что я не могу изменить свойство элемента, содержащегося в классе сетки.

Для упрощения Проблема, которую я выполнил простым тестом: я успешно смог изменить класс с именем ppp2 , когда указатель мыши прошел над ppp с помощью следующего кода.

<script>
$(document).ready(function(){
  $("ppp").hover(function(){
    $("ppp2").css("color", "#ff00ff");
    }, function(){
    $("ppp2").css("color", "#000000");
  });
});
</script>

но когда я перемещаю элемент ppp2 внутри класса сетки, он больше не работает:

<div class="wgrid-container" id="Locations">
   <ppp2>
      prova<br>prova<br>prova<br>prova<br>prova<br>
   </ppp2>  
</div>

, где wgrid-container определяется следующим образом.

.wgrid-container {
  display: grid;
  grid-template-areas:
    'header header header header header header header header'
    'menu menu main main main right right right'
    'menu menu footer footer footer footer footer footer';
  grid-gap: 0px;
  background-color: #ffffff;
  padding: 0px;
    margin: 0px;
}```

when i remove the display: grid; the jQuery works but of course i loose the grid :)

Answer 1

Это будет ppp2, а не pop, поэтому $("ppp").hover(function(){ будет $("ppp2").hover(function(){

$(document).ready(function(){
  $("ppp").hover(function(){
    $("ppp2").css("color", "#ff00ff");
    }, function(){
    $("ppp2").css("color", "#000000");
  });
});

.wgrid-container {
  display: grid;
  grid-template-areas:
    'header header header header header header header header'
    'menu menu main main main right right right'
    'menu menu footer footer footer footer footer footer';
  grid-gap: 0px;
  background-color: #ffffff;
  padding: 0px;
    margin: 0px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="wgrid-container" id="Locations">
 <ppp>
      ppp<br>ppp<br>ppp<br>ppp<br>ppp<br>
   </ppp> 
   <ppp2>
      prova<br>prova<br>prova<br>prova<br>prova<br>
   </ppp2> 
</div>