Make your own changes when you hover an Element in HTML and CSS!
- markcholloway0304
- Jun 12, 2023
- 2 min read
Updated: Jun 15, 2023
Easy thing we posted here, No, The one you are seeing right NOW!!!, So we need CSS for our hover, but it can work from your made-up elements or Element tags that do exist in HTML, Here's your CSS, I want to make changes when i hover my Title Heading from my website!
My Code:
<html> <head> <style> h1 { font-family: Arial, sans-serif; background-color: black; color: white; } </style> </head> <body> </body> </html> So now, This is our Title Heading Style that i want to add a hover with to my website I'm gonna make. So let's go back with CSS again, And let's add some more code to that CSS.
So here's my code for Hover:
<html>
<head>
<style>
h1 {
font-family: Arial, sans-serif;
background-color: black;
color: white;
}
h1:hover {
font-family: Arial, sans-serif;
background-color: white;
color: black;
}
</style>
</head>
<body>
</body>
</html>
So my changes for my hover is, I want to Invert colors as the Opposite of black and white
Here are Opposites:
black - white
white - black
Like Inverting colors, See? Grab any Chromebook and Invert colors from this page
Do you see the text is black and the background is white? You are inverting colors from a Chromebook! In fact, This works without Visual Studio Code or Works on Visual studio code! Depends on... Works in all browsers, And also, Works in all Operating Systems or Versions or ALL COMPUTERS! Anyways let's get back to that hover thing again.
Now it's important to put :hover after the tag (or id or class) name for it. It's for The Hover thing to your tag (id or class) thing!
Now let's put in our tag that we putted in from our hover in already, We're almost done, Now is the content.
(IF YOU WANT TO ADD A HOVER THING IN YOUR WEBSITE, USE IT)
# - id
. - class
No # or No . - HTML tag
Here's my code:
<html>
<head>
<style>
h1 {
font-family: Arial, sans-serif;
background-color: black;
color: white;
}
h1:hover {
font-family: Arial, sans-serif;
background-color: white;
color: black;
}
</style>
</head>
<body>
<p>Remember, This is a preview, You can put Content from the <body> element. Okay?</p>
<hr>
<center>
<h1>Hello! Hover me! See what happens!</h1>
</center>
</body>
</html>
Now, This is what it looks like, But Hover the words that say "Hello! Hover me! See what happens!" Watch, This is what my HTML page looks like? Is it cool with the hover on it?
Now hover it!!! Please...
Oh, and after you do that, Watch you can do with these tricks, Copy and paste them by Using Ctrl + shift + I (It's not gonna mess up your computer, It's gonna open DevTools from your browser.)
Hover them, Have fun with CSS and HTML!!!
We like that Selectlink one, and the ccal thing too! Hope you like these too!
Comments