Question

我不相信我可以使用：parent或sibling，伪类，因为它们都不是。它们是完全彼此分离的元素。我想知道是否有可能在没有任何JS的情况下做到这一点。纯CSS只。下面是我的标记。

    <ul id="onsix"><!-- first instance -->
        <li id="one" class="shov one"><a class="one" href="#">Lorem Ipsum.</a></li><br>
        <li id="two" class="shov two"><a class="one" href="#">Lorem Ipsum.</a></li><br>
        <li id="three" class="shov three"><a class="one" href="#">Lorem Ipsum.</a></li><br>
    </ul>

   <div class="twosix"><!-- second instance -->
        <div id="one2" class="over shov one"></div>
        <div id="two2" class="over shov two"></div>
        <div id="three2" class="over shov three"></div>
    </div>

基本上我想在第一类的任何一个实例悬停时用class="one"向两个实例添加悬停效果。到目前为止，我已经尝试了兄弟级别的psuedo课程，但没有成功。

所以，基本上这两个元素。

        <li id="one" class="shov one"><a class="one" href="#">Lorem Ipsum.</a></li><br>

和

        <div id="one2" class="over shov one"></div>

Answer 1

要在没有javascript的情况下执行此操作，您需要一个描述像11a这样的链的选择器 。一是：parent-sibling-child.one

然而，CSS3中有still no parent selector，所以不，你不能在没有javascript的情况下这样做。

是等EQCSS之类的东西，它有$parent＆＃34;选择器＆＃34;，但这需要javascript本身。

Answer 2

我认为你正在寻找标签的开头。

li [id^="one"]:hover

[] 开始和关闭您的包含条件 id 是指定我们正在寻找您也可以使用类的ID ^ 指定以 $ 结尾的其他选项开头， * 包含字符串
“one”我们正在经历的条件。

如果悬停了其中任何一个，则使用共享选择器添加悬停到两个元素

2 个答案: