3.7 KiB
| title | localeTitle |
|---|---|
| Hover | зависать |
зависать
selector:hover псевдо-класс selector:hover запускается, когда вы взаимодействуете с элементом (селектором) с указательным устройством, как правило, указателем мыши. Стили элемента, зависающего над, будут переопределены по стилю, определенному в selector:hover pseudo-class. Для правильного стиля ссылок / элементов правила должны быть определены в следующем порядке: : link -: visited -: hover -: active
Синтаксис:
selector:hover {
css declarations;
}
Другие примеры
Ниже приведены некоторые более сложные примеры того, что вы можете сделать с псевдо-классом :hover . Имейте в виду, что .second div должен появиться после .first div во всех этих примерах.
- Когда вы наведите указатель мыши на элемент, измените соседний брат.
<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, это также дает большую гибкость, поскольку два элемента больше не должны быть непосредственно смежными. Вы заметите, что область, .first от зависания, больше в примерах 3 и 4. Это происходит из-за того, что вы все еще .first если курсор находится над одним из его дочерних элементов.