Use the :hover CSS pseudo-class to change border effects in multiple ways on mouse-over
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.