How to change the opacity of an element excluding its edge?

Asked

Viewed 51 times

1

I am styling a link that has a border and I would like that when the mouse cursor was on top of it, only the text would be clearer, keeping the border in the same original color.

Using opacity, I’m not getting to delete the edge also getting lighter:

a#link:hover {
    color: #000;    
    opacity: .6;
    border: solid 1px #000;
}

Is there any way to apply opacity only in the text and delete the edges?

css

1 answer

3


Opacity works on the element as a whole, and this affects both the border, color and background.

To apply an opacity in the text you can use the option rgba only in the color, the last of the 4 values of the rgba refers precisely to the opacity of colour (alpha).

Here’s an example of how it looks:

a#link{
  color: rgba(0,0,0,1); /* 0,0,0 = cor preta, 1 significa totalmente opaco */
   border: solid 1px #000;
}

a#link:hover {
   color: rgba(0,0,0,0.6); /* 0,0,0 = cor preta, 0.6 significa 60% opaco */
}
<a id="link" href="#">Link</a>

Browser other questions tagged css

You are not signed in. Login or sign up in order to post.