Tutorial CSS Hover Selector :hover

[Malcolm]

CSS Hover Selector :hover
Hello Coders!

It's been a while since my last tutorial, I'm hoping to get a lot more out within the next couple of weeks. This tutorial is going to show you how to change the element's appearance when you hover over them using :hover. You should have an understanding of both HTML & CSS. You can What is HTML and What is CSS to get you started.

In this tutorial, I will quickly go over the:hover selector and how it can be used. Firstly, is understanding the syntax required in order to add a hover effect. The :hover is place right after the main selector (e.g. h1 h1:hover. Then followed by properties and its values. An example is down below:

[CODE lang="css" title="This shows how :hover is implemented into the CSS syntax." highlight="1"]h1:hover {
property: value;
}[/CODE]

In most cases, you will probably have two declarations, one is without the :hover and one with the :hover.

Example of usage:
You can use :hover to change the appearance of text, images, buttons etc when you hover over them. For example, you can change the width and height of an image when you hover over it. Like shown below:

Changing height & width of an image when hovering: In this example, the img has the properties width and height with values 100px and 200px. When you hover the width and height increase in size to make the image bigger.

[CODE lang="css" title="CSS when not hovering EXAMPLE."]img { width: 100px; height: 200px; }[/CODE]	​
img:hover { width: 200px; height: 400px; }	​

Changing an H1 background colour when hovering: In this example, the h1 has the property color with the value black. When you hover that color property changes to red.

h1 { color: black; }
h1:hover { color: red; }

Now you should have an understanding of how :hover works and how to implement it. If you have any questions please feel free to reply to this thread!

 

[simong1993]

the granny just makes this tut awesome lol.

Also if you add

transition: all 0.5s ease 0s;

in both the hover and hovered container it will fade it in and out and just add that extra touch 😀

 

[Malcolm]

the granny just makes this tut awesome lol.

Also if you add

transition: all 0.5s ease 0s;

in both the hover and hovered container it will fade it in and out and just add that extra touch 😀

Granny is awesome!

Ahh one of many properties that can be used with :hover. Transition property was used for Code Forum's partners section at one point!

 

[simong1993]

Granny is awesome!

Ahh one of many properties that can be used with :hover. Transition property was used for Code Forum's partners section at one point!

I don't think I ever do a link now without the transition effect, it just makes life so much easier. Say I want bigger text on hover, well that looks nice or say I want a border-radius or 5 now instead of 0 it just makes everything better so i just use it even if i don't need it now 😀

 

[Ash]

After finding out about transition, I try to use it all the time now especially for navigation bars. Just makes everything so much nicer especially when combined with hover

 

[Malcolm]

After finding out about transition, I try to use it all the time now especially for navigation bars. Just makes everything so much nicer especially when combined with hover

I’ll make a transition tutorial in the near future perhaps..