91 lines
2.4 KiB
Markdown
91 lines
2.4 KiB
Markdown
|
---
|
||
|
|
title: Hover
|
||
|
|
---
|
||
|
|
## Hover
|
||
|
|
The `selector:hover` pseudo-class is triggered when you interact with the element (selector) with a pointing device generally a mouse pointer. The styles of the element hovered over will be overridden by style defined in `selector:hover` pseudo-class.<br>
|
||
|
|
To style links/elements properly the rules should be defined in the order :- <br>
|
||
|
|
:link - :visited - :hover - :active
|
||
|
|
|
||
|
|
**Syntax :**
|
||
|
|
```css
|
||
|
|
selector:hover {
|
||
|
|
css declarations;
|
||
|
|
}
|
||
|
|
```
|
||
|
|
|
||
|
|
## More Examples
|
||
|
|
Below are some more complex examples of what you can do with the `:hover` pseudo-class. Keep in mind that the `.second` div **must** come after the `.first ` div in all of these examples.
|
||
|
|
|
||
|
|
1. When you hover over an element change an adjacent sibling.
|
||
|
|
|
||
|
|
```html
|
||
|
|
<style>
|
||
|
|
.first:hover + .second {
|
||
|
|
background-color: blue;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
|
||
|
|
<div class="first">First</div>
|
||
|
|
<div class="second">Second</div>
|
||
|
|
```
|
||
|
|
|
||
|
|
The code above will change the background color of `.second` to blue when you hover over `.first`.
|
||
|
|
|
||
|
|
2. When you hover over an element change a general sibling.
|
||
|
|
|
||
|
|
```html
|
||
|
|
<style>
|
||
|
|
.first:hover ~ .second {
|
||
|
|
background-color: blue;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
|
||
|
|
<div class="first">First</div>
|
||
|
|
<div class="middle">Middle</div>
|
||
|
|
<div class="second">Second</div>
|
||
|
|
```
|
||
|
|
|
||
|
|
This example gives a little bit more flexibility as the two elements no longer have to be directly adjacent.
|
||
|
|
|
||
|
|
3. When you hover over an element change a direct descendant.
|
||
|
|
|
||
|
|
```html
|
||
|
|
<style>
|
||
|
|
.first:hover > .second {
|
||
|
|
background-color: blue;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
|
||
|
|
<div class="first">
|
||
|
|
First
|
||
|
|
<div class="second">Second</div>
|
||
|
|
</div>
|
||
|
|
```
|
||
|
|
|
||
|
|
The code above will change the background color of `.second` to blue when you hover over `.first`.
|
||
|
|
|
||
|
|
4. When you hover over an element change a general descendant.
|
||
|
|
|
||
|
|
```html
|
||
|
|
<style>
|
||
|
|
.first:hover .second {
|
||
|
|
background-color: blue;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
|
||
|
|
<div class="first">
|
||
|
|
First
|
||
|
|
<div class="container">
|
||
|
|
Container
|
||
|
|
<div class="second">Second</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
```
|
||
|
|
|
||
|
|
As in example 2, this also gives more flexibility as the two elements no longer have to be directly adjacent. You will notice that the hover-able area is bigger in examples 3 and 4. This happens because you are still hovering over `.first` as long as the cursor is over one of its children.
|
||
|
|
|
||
|
|
|
||
|
|
#### More Information:
|
||
|
|
<a href='https://developer.mozilla.org/en-US/docs/Web/CSS/%3Ahover' target='_blank'>MDN Web Docs</a><br>
|
||
|
|
<a href='https://www.w3schools.com/cssref/sel_hover.asp' target='_blank'>w3schools</a>
|