• Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.
    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

Tutorial CSS Hover Selector :hover

Malcolm

Administrator
Administrator
Verified
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:

This shows how :hover is implemented into the CSS syntax.:
h1:hover {
    property: value;
}

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.
CSS when not hovering EXAMPLE.:
img {
    width: 100px;
    height: 200px;
}
1605571606219.png
Code:
img:hover {
    width: 200px;
    height: 400px;
}
1605571678262.png


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.
Code:
h1 {
    color: black;
}
1605571888336.png
Code:
h1:hover {
    color: red;
}
1605571945125.png

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

Active Coder
Community Engagement
the granny just makes this tut awesome lol.

Also if you add
CSS:
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 :D
 

Malcolm

Administrator
Administrator
Verified
the granny just makes this tut awesome lol.

Also if you add
CSS:
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 :D
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

Active Coder
Community Engagement
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 :D
 

Ash

Active Coder
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

Administrator
Administrator
Verified
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..
 
Top Bottom