⚠️ This lesson is retired and might contain outdated information.

Use the :hover CSS pseudo-class to change border effects in multiple ways on mouse-over

Share this video with your friends

Social Share Links

Send Tweet
Published 4 years ago
Updated 2 years ago

You can set an element's border to change on mouse-over by using the ":hover" CSS pseudo-class.

The ":hover" selector creates a "hover-over" effect for an element when you mouse-over it. We'll play around with different border effects like border-style, border-width, border-color, and opacity for images and text!

Hiro Nishimura: [0:00] Let's create a new class in your CSS. I named mine effect. I already have an image in text such as effect class in my index.html. Right now, they're just plain image and text with no border, as you can see.

[0:14] Back in my CSS, I give the element a border and choose a color and width. I decided to give the element a solid blue border that is 10px wide. If we refresh the page, the image and text now have solid blue borders that are 10px wide.

[0:32] Now, let's set the hover pseudo-class and change up some attributes at mouseover. We'll keep the border-style: solid, but let's change the border-color: yellow. Let's also keep the border-width: 10px. When you refresh the page, you can see that when we mouseover the image and text, the border changes from blue to yellow.

[0:52] Let's try changing up the border even more at mouseover. You can change the border to become dotted at mouseover by coming back to the hover pseudo-element and changing the border style to dotted. We'll change the color to red while we're at it. Let's make the border thicker, 20px.

[1:09] To make this extra fancy, we're going to add the opacity property. Let's set opacity to 50%. If we refresh, we can see that we've changed all the attributes to the border at mouseover.

[1:20] There are many things you can do to borders at mouseover using the hover pseudo-class, including changing the border style, border color, border width, and border opacity.

egghead
egghead
~ 19 minutes ago

Member comments are a way for members to communicate, interact, and ask questions about a lesson.

The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io

Be on-Topic

Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.

Avoid meta-discussion

  • This was great!
  • This was horrible!
  • I didn't like this because it didn't match my skill level.
  • +1 It will likely be deleted as spam.

Code Problems?

Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context

Details and Context

Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!

Markdown supported.
Become a member to join the discussionEnroll Today