CSS hover – 4 Examples of hover in div, a: link, p, headings etc.

CSS hover – 4 Examples of hover in div, a: link, p, headings etc.

What is the hover state?

The hover state occurs when the mouse is over the certain element of the web document. Generally, it is used for HTML links. However, the hover state also applies to the other elements like div, headings, paragraphs etc.

>>See an example of hover in div

This tutorial shows how you can apply different properties as the hover state occurs in different elements including the links.

Example of hover state in HTML links

This example shows how to apply different properties in the hover CSS state of HTML link. As the mouse is over a link the font style and the color will be changed in the hover state. See the demo by clicking the link or image:

CSS hover links

Experience this example online

You can use the CSS a: hover to apply properties in link’s hover state. As you bring the mouse over the first link its font size is changed in the demo.

The hover state of div element example

As mentioned earlier, not only the hover state applies to the HTML links but also to the div element as well. Following example shows how div hover state works. The example applies border and text color to a div element as hover (mouseover) state happens in the div by using hover in CSS.

Experience this example online

You can see, as the mouse is over the div and hover state occurred, the border style of div changed to the solid.

Using CSS hover in heading example

You can apply the CSS hover properties to the headings in HTML document as well.  The example below shows changing the properties of heading 1 as hover state occurs.

CSS hover

Experience this example online

Using hover to <p> element

Similarly, you can apply CSS in hover state to the paragraph tag as well. The following example shows how to change some properties of the <p> tag as the hover state occurs.

Experience this example online

 

Also see: CSS link