Question

我想知道是否有一种方法可以仅使用css对父元素应用悬停效果。例如，我有一个导航：

<nav>
<ul>
    <a href="#"><li id="firstLiElement" class="main-nav ieraksti">ieraksti!</li></a>
        <ul id="audio_sub_menu">
            <li class="mes">mēs 1</li>
            <li id="klienti">mēs 2</li>
        </ul>
    <a href="#"><li class="main-nav" id="audio">paklausies!</li></a>
    <a href="#"><li class="main-nav" id="video">paskaties!</li></a>
    <a href="#"><li class="main-nav" id="kontakti">pasūti!</li></a>
</ul>
</nav>`

我想要的是，当它徘徊时 nav ul ul li 元素，它会影响 #firstLiElement 。我知道它可以用JS完成，但是还必须有一种方法可以用css来做到这一点。当你需要影响兄弟姐妹或孩子时，我找到了很多解决方案，但没有找到适合这种情况的任何东西。

修改

抱歉，甚至没有写出我想要的东西......是的，sub_menus是隐藏的，但是当我悬停主导航li元素时，它们会推动，当我将它们悬停在它们上时它们仍然可见。我遗漏的是当子菜单悬停时更改主导航li元素的背景颜色。

Answer 1

我找到了你。

a < img { border: none; }

在这个例子中，它会选择一个标签，但前提是它们包含一个img标签。（旁白：这将是一个奇怪的偏离典型语法，其中选择的实际元素在右侧，这将在左侧）。

a img:parent { background: none; }

关键区别在于：parent语法只评估单个元素，DOM中的parentNode可用于每个元素。这类似于强制：has选择器只评估子项而不是所有后代。

https://css-tricks.com/parent-selectors-in-css/

Answer 2

我相信它无法完成。 CSS或Cascade Style Sheet - 这里的关键字是Cascade - 以级联方式执行，而不是相反。

你可以这样做（假设audio_sub_menu，即隐藏）：

nav ul a:hover ul {
    visibility: visible;
}

并且您将以其父母悬停为目标对象。因此，您可以更改布局和设计以使用此知识，或者使用JS解决方案：）

修改

要获得相同的颜色，请在父级上设置:hover样式并更改HTML代码中的第一个</a>

<nav> <ul> <a href="#"><li id="firstLiElement" class="main-nav ieraksti">ieraksti!</li> <ul id="audio_sub_menu"> <li class="mes">mēs 1</li> <li id="klienti">mēs 2</li> </ul> </a> <a href="#"><li class="main-nav" id="audio">paklausies!</li></a> <a href="#"><li class="main-nav" id="video">paskaties!</li></a> <a href="#"><li class="main-nav" id="kontakti">pasūti!</li></a> </ul> </nav>

和CSS

nav ul a:hover { background-color: your_color; } nav ul a:hover ul { visibility: visible; background-color: your_color; }

编辑 - 关于hetasbo的回答

那些是建议的css选择器，它们不存在

用css悬停在父元素上

2 个答案: