Добрый день,подскажите как быть у 1 таблицы сделан градиент и hover.Ховер почему то дико резко происходит, а во втором варианте просто background без градиента и все плавно.Как исправить эту резкость?
https://jsfiddle.net/Zkolya_linkoln/rgzzf94o/1/
#tablemenu1 td {
cursor:pointer;
background: linear-gradient(to bottom,#00b200,#009900);
width:10%;
height:45px;
vertical-align: middle;
border:1px solid #339900;
text-align:center;
transition: 2s;
color:white;
font-weight:900;
font-family:"Roboto", Arial, sans-serif;
}
#tablemenu1 td:hover {
background: #00b200;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
}
Спасибо!
Ответ
При наведении нужно изменять linear-gradient.
#tablemenu1{ width:100%;}
#tablemenu1 td:first-child {
border-top-left-radius: 15px;
border-bottom-left-radius: 15px;
}
#tablemenu1 td:last-child {
border-top-right-radius: 15px;
border-bottom-right-radius: 15px;
}
#tablemenu1 td {
cursor:pointer;
background: linear-gradient(to bottom,#00b200,#009900);
width:10%;
height:45px;
vertical-align: middle;
border:1px solid #339900;
text-align:center;
transition: 2s;
color:white;
font-weight:900;
font-family:"Roboto", Arial, sans-serif;
}
#tablemenu1 td a {color:white;}
#tablemenu1 td:hover {
//background:#22dd66;
background: linear-gradient(to bottom,#00b200,#00b200);
//background: #00b200;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
}
/*------------------------*/
#tablemenu2{ width:100%;}
#tablemenu2 td:first-child {
border-top-left-radius: 15px;
border-bottom-left-radius: 15px;
}
#tablemenu2 td:last-child {
border-top-right-radius: 15px;
border-bottom-right-radius: 15px;
}
#tablemenu2 td {
cursor:pointer;
background: green;
width:10%;
height:45px;
vertical-align: middle;
border:1px solid #339900;
text-align:center;
transition: 2s;
color:white;
font-weight:900;
font-family:"Roboto", Arial, sans-serif;
}
#tablemenu2 td a {color:white;}
#tablemenu2 td:hover {
background: #00b200;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
}
| Об Учереждении | Аккредитация |
| Об Учереждении | Аккредитация |
Комментариев нет:
Отправить комментарий