2.3 KiB
2.3 KiB
title | localeTitle |
---|---|
Hover | 徘徊 |
徘徊
当你使用指针设备(通常是鼠标指针)与元素(选择器)交互时,会触发selector:hover
伪类。悬停在其上的元素的样式将被selector:hover
定义的样式覆盖selector:hover
伪类。 要正确设置链接/元素的样式,应按顺序定义规则: - :link - :visited - :hover - :active
句法 :
selector:hover {
css declarations;
}
更多例子
下面是一些更复杂的示例,说明了如何使用:hover
伪类。请记住, .second
DIV 必须出现在后.first
在所有的这些例子格。
- 当您将鼠标悬停在元素上时会更改相邻的兄弟元素。
<style>
.first:hover + .second {
background-color: blue;
}
</style>
<div class="first">First</div>
<div class="second">Second</div>
上面的代码将背景颜色改变.second
,当你将鼠标悬停在蓝色.first
。
- 当您将鼠标悬停在某个元素上时,会更改一般兄弟。
<style>
.first:hover ~ .second {
background-color: blue;
}
</style>
<div class="first">First</div>
<div class="middle">Middle</div>
<div class="second">Second</div>
这个例子提供了更多的灵活性,因为两个元素不再必须直接相邻。
- 当您将鼠标悬停在元素上时,请更改直接后代。
<style>
.first:hover > .second {
background-color: blue;
}
</style>
<div class="first">
First
<div class="second">Second</div>
</div>
上面的代码将背景颜色改变.second
,当你将鼠标悬停在蓝色.first
。
- 将鼠标悬停在元素上时,更改一般后代。
<style>
.first:hover .second {
background-color: blue;
}
</style>
<div class="first">
First
<div class="container">
Container
<div class="second">Second</div>
</div>
</div>
如在示例2中,这也提供了更大的灵活性,因为两个元件不再必须直接相邻。您会注意到,在示例3和4中,可悬停区域更大。这种情况发生的原因是,只要光标位于其中一个子.first
,您仍然会悬停在.first
。