Question

我想问一下能帮助我的人这两个CSS标签的区别在哪里。

.bmenu:hover li a{...}

VS

.bmenu li a:hover{...}

非常感谢您的帮助，并为我糟糕的英语而烦恼。

编辑1：我想主要解释一下，它们是如何工作的，因为在第一种情况下，后面有一个“li a”：hover。这意味着什么？ THX

Answer 1

为了解释这一点，我将使用这个示例代码：

<div class="bmenu">
<ul>
<li><a href="#">one</a></li>
<li><a href="#">two</a></li>
</ul>
</div>

如果您使用.bmenu:hover，则表示您希望在悬停整个 .bmenu div时应用CSS。

当您在.bmenu li a:hover a内悬停.bmenu标记时，您说li表示要应用CSS。

以下是我做的一个简单示例，顶部使用.bmenu:hover方法，底部使用li a:hover方法。 fiddle here

Answer 2

在第一种情况下，<a>将在您悬停.bmenu时应用样式，在第二种情况下 - 当您将鼠标悬停在<a>时。看看这两个块：

＆＃13;

.bmenu1, .bmenu2 {
    width: 200px;
    height: 100px;
    margin: 10px;
    padding: 40px;
    background-color: orange;
}
a {
    display: block;
    height: 100%;
    width: 100%;
    background-color: firebrick;
}
.bmenu1:hover a {
    background-color: lightblue;
}
.bmenu2 a:hover {
    background-color: lightblue;
}

＆＃13;

<div class="bmenu1">
    <a href="#"></a>
</div>
<div class="bmenu2">
    <a href="#"></a>
</div>

＆＃13;

（.bmenu：hover li a）VS（.bmenu li a：hover） - 区别？

2 个答案: