有什么方法可以在将鼠标悬停在子元素上时将样式应用于父元素吗？

Question

我有一个链接里面。当我将鼠标悬停在链接上时，我想要样式。

<div class="video">
   <div class="video-interior">
      <a href="#">LINK</a>
   </div>
</div>

当我将鼠标悬停在'a'标记上时，我想将样式应用于最外层的div。

这可能吗？

Answer 1

不，您无法访问父元素with current CSS implementations。

但你可以直接在父元素上使用:hover伪类，这是最明显的解决方案。

.video:hover {
    background: red;
}

Answer 2

您可以将悬停应用于包含<a>标记的div，这将产生您描述的效果：

CSS：

.video:hover { /* your stylings */ }

Answer 3

这是一个jQuery示例：

$(function()
{
   $('.video .video-interior a').on('hover',function()
   {
       $(this).parent().parent().css('background','#f00');
   }
});