Question

我目前正在尝试更改css中另一个对象的属性，但我不确定我是否正确这样做。任何帮助将不胜感激。

＆＃13;

ul.drop-menu {
  opacity: 0.1;
}

nav > ul > li:hover ~ ul.drop-menu {
  opacity: 1;
}

＆＃13;

<nav>
    <ul>
        <li>Test
            <ul class="drop-menu">
                <li class="1">Test1</li>
                <li class="2">Test2</li>
                <li class="3">Test3</li>
                <li class="4">Test4</li>
                <li class="5">Test5</li>
                <li class="6">Test6</li>
                <li class="7">Test7</li>
            </ul>
        </li>
    </ul>
</nav>

＆＃13;

Answer 1

~是＆＃34; general sibling selector＆＃34;，因此它将匹配选择器左侧元素后面的兄弟元素。

使用您的标记，您只是想删除~以定位ul.drop-menu的孩子的任何li，或者如果您想要直接后代，请将其更改为{ {1}}。我假设您想要后者，以防您在>中嵌套多个.drop-menu。我添加了另一个嵌套菜单并稍微更改了选择器以证明这一点。

＆＃13;

li

＆＃13;

ul.drop-menu {
  opacity: 0.1;
}

nav > ul li:hover > ul.drop-menu {
  opacity: 1;
}

＆＃13;

Answer 2

您必须使用>代替~。请检查一下：

ul.drop-menu {
  opacity: 0.1;
}

nav > ul > li:hover > ul.drop-menu {
  opacity: 1;
}

<nav>
    <ul>
        <li>Test
            <ul class="drop-menu">
                <li class="1">Test1</li>
                <li class="2">Test2</li>
                <li class="3">Test3</li>
                <li class="4">Test4</li>
                <li class="5">Test5</li>
                <li class="6">Test6</li>
                <li class="7">Test7</li>
            </ul>
        </li>
    </ul>
</nav>

如何在悬停css上更改另一个对象的属性

2 个答案: