Witam, mam problem z elementami li > a w menu, ponieważ każdy z tych elementów ma nałożony gradient na tekst to po usunięciu -webkit-text-fill-color: transparent;, aby dodać hover nie mogę zmienić koloru linku, jest on cały czas fioletowy, czyli domyślny dla linka.
Dodam, że samo color: #fff; działa, lecz ja chce dodać gradient.
Gdy usunę -webkit-text-fill-color: transparent; działa hover, ale nie działa gradient samego tekstu, a gdy zostawię ten zapis to nie działa hover, ale sam gradient działa.
HTML:
<nav>
<ul>
<li><a href="#" class="menu-item-1 font-color-1">Home</a></li>
<li><a href="#" class="menu-item-2 font-color-1">Forum</a></li>
<li><a href="#" class="menu-item-2 font-color-1">Register</a></li>
<li><a href="#" class="menu-item-2 font-color-1">Support</a></li>
<li><a href="#" class="menu-item-3 font-color-2"><span class="font-color-3">Download</span><br>Client 1,2 GB</a></li>
<li><a href="#" class="menu-item-4 font-color-1">ItemShop</a></li>
<li><a href="#" class="menu-item-4 font-color-1">Rankings</a></li>
<li><a href="#" class="menu-item-4 font-color-1">Contact</a></li>
<li><a href="#" class="menu-item-5 font-color-1">Events</a></li>
</ul>
</nav>
CSS:
nav{
background: url(img/menu.png);
width: 1063px;
height: 84px;
margin: auto;
}
ul{
margin: 0;
padding: 0;
display: block;
width: 900px;
height: 48px;
margin: auto;
list-style-type: none;
}
.font-color-1{
background-image: -webkit-gradient(linear,
left top, left bottom,
from(#c2b59b),
to(#817762));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-weight: 700;
text-transform: uppercase;
font-size: 12px;
line-height: 44px;
text-decoration: none;
}
.font-color-1:hover{
background-image: -webkit-gradient(linear
left top, left bottom,
from(#cfbf9e),
to(#c2b59b));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.font-color-2{
color: #a9af79;
text-decoration: none;
font-weight: 700;
text-transform: uppercase;
font-size: 10px;
line-height: 16px;
padding-top: 3px;
}
.font-color-3{
color: #111304;
font-size: 12px;
}
.menu-item-1
{
display: block;
width: 76px;
height: 46px;
text-align: center;
float: left;
}
.menu-item-2
{
display: block;
width: 94px;
height: 46px;
text-align: center;
float: left;
}
.menu-item-3
{
display: block;
width: 186px;
height: 46px;
text-align: center;
float: left;
}
.menu-item-4{
display: block;
width: 94px;
height: 46px;
text-align: center;
float: left;
}
.menu-item-5{
display: block;
width: 70px;
height: 46px;
text-align: center;
float: left;
}