仅使用css在DOM中向下悬停和更改div？

如果我在html中有这样的选项卡：

<ul class="qtabs">
    <li><a href="{show tab1}">tab 1 title</a></li>
    <li class="active"><a href="{show tab2}">tab 2 title</a></li>
    <li><a href="{show tab3}">tab 3 title</a></li>
</ul>

<div class="tab-container">

    <div id="tab1">
        <div class="tab-content">text, text, text, text....</div>
    </div>

    <div id="tab2" style="display:none;">
        <div class="tab-content">text, text, text, text....</div>
    </div>

    <div id="tab2" style="display:none;">
        <div class="tab-content">text, text, text, text....</div>
    </div>

</div>

文本，文本，文本，文本。。。。
文本，文本，文本，文本。。。。
文本，文本，文本，文本。。。。

是否可以使用CSS only来产生悬停效果（更改用户悬停在其上的选项卡的.tab内容的textcolor？（如果仅适用于css3，则可以）

可能的二次钙化？

---

有点，但4年来什么都没有发生？：-）

问题是，您需要检查

ul

的子项以查看哪个是活动的，然后反向备份DOM以访问

选项卡内容。这就是你写规则的方式

ul li.active:hover  + .tab-container #tab1 .tab-content {color:#f00;}

但是，目前无法在CSS中执行此操作。
这种行为经常被请求，通常被称为“父选择器”

如果您可以更改标记，并可能在
ul
上包含一些内容，使您能够识别选项卡，那么您可以执行以下操作：

ul.activeTab1:hover + .tab-container #tab1 .tab-content {color:#f00;}
ul.activeTab2:hover + .tab-container #tab2 .tab-content {color:#f00;}

这几乎就是我认为你想要的

不幸的是，你无法得到你想要的东西，但也许这已经足够满足你的需要了

如果您允许鼠标悬停在
.qtabs
上，而不是在每个
li
上。然后，您可以结合使用同级选择器和标准子体选择器来满足您的需要：

.qtabs:hover ~ .tab-container .tab-content {
    color:red;
}


这种方法的好处是，它不需要对现有的HTML结构进行任何更改，也不需要JavaScript，我认为无论出于何种原因，您都在试图避免使用JavaScript


每个标签页需要有不同的颜色吗

那么，为什么不试试我们的
呢？我认为，像您这样的HTML结构，您是做不到的。如果你有，你可以澄清一下吗？当您在
qtabs
中悬停相应的
li
时，是否试图更改
选项卡内容的颜色，或当您在
选项卡1
上悬停相应的li时，是否尝试更改
选项卡内容的颜色澄清：我想在qtabs中悬停相应的li时更改选项卡内容的颜色我认为这是根据@musefan的回答和@forgetso：好主意！我想这已经足够近了。非常感谢！：-）