javascript - 将鼠标悬停在其他元素上时，将鼠标悬停在某个元素上

我有以下结构：

<div class="menuHomeCategorias Accesoriosclass">
  <div class="categoryName Accesorios" name="Accesorios">
    <p>Accesorios</p>
  </div>
  <img class="categoriasHome" alt="Categoria" name="Accesorios" src="media/com_hikashop/upload/accesorios.jpg">
</div>

在我的CSS上我有这个：

.categoryName:hover {
  background-color: #BF003E;
  color: #FFFFFF;
}

我的指针悬停在img上时，我需要触发.categoryName:hover，我一直试图通过jquery来执行此操作，但是它会触发太多的递归消息：

$('.categoriasHome').bind('mouseover', function(){
    console.log("over");
    $(".categoryName.Accesorios").mouseover();
});

有人可以指出我正确的方向吗？

提前致谢。

最佳答案

我认为添加/删除类名会更容易。像这样

$('.categoriasHome').hover(function(){
    console.log("over");
    $(".categoryName.Accesorios").toggleClass('hovered');
});

并据此调整CSS。