将鼠标悬停在链接上时更改父 div 的 css

如何解决将鼠标悬停在链接上时更改父 div 的 css

我尝试了这个解决方案，但遗漏了一些东西：change background of parent div on hover

这是我的 html：

CordovaPlugins (from 

这是我在这里尝试使用的覆盖：/templates/shaper_helixultimate/html/com_content/category/default_children.PHP

)

http://jsfiddle.net/t5hf8qdc/

我做错了什么？

<div class="Box">
    <h3 class="page-header item-title">                                              
          <a class="titlelink" href="/index.PHP?option=com_content&amp;view=category&amp;id=11&amp;Itemid=234">
                Modeling</a>

$document = JFactory::getDocument();
$document->addScriptDeclaration('
$('.Box > .titlelink').hover(function(){
$(this).parent().toggleClass('hover');
})
    });
');

解决方法

选择器 .box > .titlelink 寻找父子关系。你没有那个。

改用 .box .titlelink。

$('.box .titlelink').hover(function() {
  $(this).parent().toggleClass('hover');
});

.hover {
  background: pink;
}

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

<div class="box">
  <h3 class="page-header item-title">
    <a class="titlelink" href="/index.php?option=com_content&amp;view=category&amp;id=11&amp;Itemid=234">
                    Modeling</a>
  </h3>
</div>

,

正如@isherwood 提到的，您链接到的解决方案使用的结构与您现有的结构不同。 CSS 选择器中的 > 指定您的目标是直接子元素，而在两个选择器之间留一个空格来查找任何后代。

.box > .titlelink {
  /* targets where .titlelink is a child of .box */
}

.box .titlelink {
  /* targets where .titlelink is a descendant of .box */
}

如果你想像你引用的解决方案一样使用严格的 CSS 选择器，你可以这样做：

$('.box > .item-title > .titlelink').hover(function(){
  $(this).parent().toggleClass('hover');
});

虽然这会将 hover 类添加到 .item-title 元素，而不是添加到 .box 元素。假设您特别希望针对 .box 事件监听的任何对象的 hover 祖先，那么您需要：

$('.box > .item-title > .titlelink').hover(function(){
  $(this).parents('.box').toggleClass('hover');
});

因为 jQuery 的 parents 方法允许您传递一个选择器来定位特定的祖先，在树中向上移动多个级别。