| |
|
|
| | Пример, на сайте "вконтакте" при подводе к самописным селектам. Плавно меняется цвет с белого до синего. Подскажите, как это у них реализуемо? В голову приходит только javascript, обработчик на id (селектор), и прогон по циклу rgb цвета. Например, с 255,255,255 до нужного. Но это же слишком по хардкору... Может, какие-то св-ва аниманции применяются на css3? Какие есть варианты?
Есть такое решение:
<!DOCTYPE HTML>
<html lang="ru-RU">
<head>
<title>CSS3</title>
</head>
<body style="background:#cccccc;">
<style>
.MyTrash, .MyTrash span {
display: block;
width: 100px;
height: 100px;
cursor: pointer;
background: rgb(255,102,255);
-webkit-transition: .5s opacity;
-moz-transition: .5s opacity;
-ms-transition: .5s opacity;
-o-transition: .5s opacity;
transition: .5s opacity;
}
.MyTrash {
position: relative;
opacity: 1;
background: rgb(0,102,255);
}
.MyTrash span {
position: absolute;
top: 0;
left: 0;
opacity: 0;
}
.MyTrash:hover span {
opacity: 1;
}
</style>
<div class="MyTrash"><span></span></div>
</body>
</html>
|
Но св-во "transition" - не работает в IE8.0.. Можно ли как-то поправить код, чтобы в IE хотя бы менял цвет, пускай и быстро.
Без создания доп. css файла под IE?
Понятно, что если в
.MyTrash:hover span {
opacity: 1;
}
|
добавить background: rgb(255,102,255); , то в IE будет меняться цвет. Но тогда в др. браузерах не будет плавного эффекта. | |
| |
|
|
| |
|
|
| |
для: Jaroslav
(01.02.2014 в 19:06)
| | |
.lol {
width:100px; height:100px; background:#CCC;
-webkit-transition-duration: 1s;
-o-transition-duration: 1s;
-moz-transition-duration: 1s;
transition-duration: 1s;
}
.lol:hover {
background:#F00;
}
</style>
<div class="lol"></div>
|
в ie ниже 10 го никак.
только js
на jquery все хорошо работает не стоит это понимать как "хардкор" | |
| |
|
|
| |
|
|
| |
для: moonfox
(01.02.2014 в 21:09)
| | | Большое спасибо. То, что надо. | |
| |
|
|
