使用CSS:hover更改样式，但仅当与特定类相邻时

我正在试验Bootstrap.js面板，它可能会崩溃。我想看看是否可以更改面板标题元素的样式，但仅当它与面板折叠元素相邻时。下面的选择器将明显更改所有标题

.panel-heading:hover {}

因为我试图向前看，看看目标元素后面是否有一个特定的类，我不确定CSS是否能支持这一点

<!-- This should change style of panel-heading when hovering over the panel-heading element -->
<div class="panel">
    <div class="panel-heading">
    </div>
    <div class="panel-collapse">
    </div>
</div>

<!-- This should NOT change the style of the panel-heading when hovering over the panel-heading element -->
<div class="panel">
    <div class="panel-heading">
    </div>
    <div class="panel-body">
    </div>
</div>

---

目前在CSS3中没有办法做到这一点，但是在CSS3中提出了一些建议。这项功能已被广泛要求

关系伪类：：has（）

这样您就可以执行以下操作：

.panel:has(.panel-collapse) .panel-heading {

}

也就是说，将样式应用于所有

.panel heading

类，这些类是

的子类。panel

类包含

。panel collapse

这是一篇关于即将推出的CSS选择器级别4的精彩文章：

---

同时，您必须使用jQuery之类的工具。您可以向包含类为

的元素的所有
.panel
元素添加一个类，如
.panel hoverable
。panel collapse
在CSS3中目前无法实现这一点，但是在中提出了一些建议。这项功能已被广泛要求

关系伪类：：has（）

这样您就可以执行以下操作：

.panel:has(.panel-collapse) .panel-heading {

}

也就是说，将样式应用于所有
.panel heading
类，这些类是
的子类。panel
类包含
。panel collapse

这是一篇关于即将推出的CSS选择器级别4的精彩文章：

同时，您必须使用jQuery之类的工具。您可以向包含类为
的元素的所有
.panel
元素添加一个类，如
.panel hoverable
。panel collapse
您只能从左到右操作，而不能从右到左操作，因此如果您将鼠标悬停在右侧面板上，则无法与左侧面板对话。CSS始终从上到下。。如果你看到你的HTML
.panel collapse
位于
.panel heading
之后，因此纯CSS解决方案是不可能的。您只能从左到右而不是从右到左执行此操作，因此如果您将鼠标悬停在右面板上，则无法与左面板对话。CSS始终从上到下。。如果你看到你的HTML
.panel collapse
位于
.panel heading
之后，因此纯CSS解决方案是不可能的