user3600840 user3600840 - 3 months ago 23
CSS Question

CSS gradient don't disaaper by hovering

I want to create a gradient in the end of the of the link like this:

gradient1

but when I hover it, gradient doesn't disaapear,

gradient2

My HTML code:

<a href="#">https://<span class="txt">in Phrase Overview</span></a>


CSS code

.txt{
padding: 12px 16px;
color:blue;
top:0;
-webkit-box-shadow: -10px 0 10px -2px #ffffff;
box-shadow: -10px 0 10px -2px #ffffff;
}
span:hover{
-webkit-box-shadow: none;
box-shadow: none;
}


please, help me to check this problem.

Answer

Change your style to this:

.txt{
  padding: 12px 16px;
  color:blue;
  top:0;
  -webkit-box-shadow: -10px 0 10px -2px #ffffff;
  box-shadow: -10px 0 10px -2px #ffffff;  
}
a:hover span.txt{    
  -webkit-box-shadow: none;
  box-shadow: none;  
}