Hovering means moving the mouse/cursor over an element.
Hovered elements have a different state which can be styled differently.
The :hover pseudo-class is triggered when hovering over an element.
Hover over the link and see the style change.
<style>
.hover-a {
color: steelblue;
}
.hover-a:hover {
color: navy;
font-weight: bold;
font-style: italic;
}
</style>
<a class="hover-a"
href="javascript:void(0)">Mouse over this link</a>
The :hover selector selects elements that are hovered.
The default style of an element can be overridden using this selector.
This selector works on any elements that can be hovered.
Mouse over the heading or paragraph below and see the style change.
Hover this paragraph
<style>
.hover-element {
padding: 15px;
}
.hover-element:hover {
background-color: moccasin;
}
</style>
<h3 class="hover-element">Hover this heading</h3>
<p class="hover-element">Hover this paragraph</p>
Hover the text below to display a 'tooltip'.
<style>
.hover-tooltip {
background-color: #dfe7ff;
padding: 10px;
margin: 10px;
display: none;
width: 200px;
}
.hover-div:hover + .hover-tooltip {
display: block;
}
</style>
<div class="hover-div">Hover to display tooltip</div>
<div class="hover-tooltip">Tooltip displayed!</div>
By default, a style change due to :hover occurs instantly, .
For a nice effect, a CSS transition can animate a style change.
Hover over the <button> element and see how the hover style is applied smoothly.
<style>
.hover-button {
padding: 10px;
width: 150px;
border: 1px solid #ddd;
transition: .7s ease;
}
.hover-button:hover {
background-color: #302ea3;
color: white;
}
</style>
<button class="hover-button">Hover me</button>
