CODEWITHSUNDEEP
htmlcss
user3600840
user3600840

Reputation:

CSS gradient don't disaaper by hovering

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

gradient1

The gradient should disappear when hovering over it.

My HTML code (jsfiddle):

<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;  
}

But when I hover it, the gradient doesn't disappear:

gradient2

please, help me to check this problem.

Upvotes: 0

Views: 28

Answers (1)

RezaGM
RezaGM

Reputation: 66

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;  
}

Upvotes: 1

Related Questions