Question

这两者有什么区别

footer:hover a{}

和

footer a:hover{}.

这在我们的CSS3课程中引起了一些混乱，我所做的研究并没有对它有所了解。

Answer 1

footer:hover a{}

匹配<a>元素，该元素是处于footer状态的hover元素的子元素。

<footer>                                <---  hovered
    <a href="#">Some text</a><br/>      <--- both matched
    <a href="#">Some text 2</a>         <--- both matched
</footer>
<a href="#">Lost in dark</a>            <--- unmatched, as it's not a child of <footer>

footer a:hover{}

匹配正在<a>上的:hover，并且是<footer>元素的子级。

<footer>
    <a href="#">Some text</a><br/>      <--- hovered, matched
    <a href="#">Some text 2</a>         <--- unmatched
</footer>
<a href="#">Lost in dark</a>            <--- hovered, but then also unmatched, as not a child of <footer>

在这里a fiddle展示差异。

希望能说清楚！

Answer 2

footer:hover a是一个伪选择器。如果将鼠标悬停在页脚的任何部分上，它将定位<a>元素

例如

footer:hover a {
    background: red;
}

将鼠标悬停在页脚的任何部分上只会为链接指定红色背景，而页脚css将不会更改。

footer a:hover选择作为页脚子元素的任何a元素。因此，如果您将鼠标悬停在作为页脚标记的子项的链接上，它将执行该css。这与第一个示例不同，因为您必须将鼠标悬停在链接上以更改链接的背景。不仅仅是悬停页脚的任何部分。

例如

footer a:hover {
    background: green;
}

只是自己尝试或看一个例子中的代码可以帮助很多：的 DEMO FIDDLE

Answer 3

footer:hover a{}

在要应用的元素中定义页脚元素。

其中footer a:hover{}

在元素内定义页脚元素以应用悬停效果。

检查演示jsFiddle

HTML

<footer>
    <a href="#">Hello Stackoverflow</a>
</footer>

CSS

footer{
    width:300px;
    height:40px;
    border:1px solid blue;
}
footer:hover a{
    background-color: red;
}

footer a:hover{
    background-color:yellow;
}

Answer 4

footer:hover a{ color: red }选择锚元素，并仅在页脚悬停时将颜色更改为红色。

footer a:hover{ color: red}会改变锚元素的颜色，只要它在页脚内部并且也会悬停在其上。

举个例子：

假设页脚除了锚之外还有其他元素。

<footer>
  <div> I am div</div>
  <a> I am anchor </a>
</footer>

现在，当您将鼠标悬停在div上时，在第一种情况下，它会将锚点的颜色更改为红色。因为div是页脚的一部分，并且由于页脚也悬停，所以选择器会应用并更改其颜色。

第二个例子：

<a> Anchor 1: I am outside footer  </anchor>
<footer>
   <a> Anchor2: I am anchor </a>
</footer>

现在，在情况2中，如果您将鼠标悬停在锚点1上，它将不会将颜色更改为红色，因为它不在页脚内部，而悬停在锚点2上将改变其颜色。

CSS3的差异：悬停选择器

4 个答案:

检查演示jsFiddle

HTML

CSS