Мне бы хотелось, чтобы текущее изображение меняло цвет и восстанавливало его после того, как мышь ушла с этого конкретного изображения.
Это приведет к созданию красивого многоцветного рисунка, поскольку мышь перемещается по повторяющимся изображениям.
Заранее благодарны за Вашу помощь. Скрипка была бы замечательной!
Что-то вроде этого:
CSS
.foo {
background: url('image1.png') repeat top left;
}
.foo:hover {
background: url('image2.png') repeat top left;
}
HTML
<div class="foo"></div>
Хм. Я бы использовал фильтр webkit для этого (но это я и я люблю браузеры webkit и живу в надежде, что в один прекрасный день все браузеры его поддержат).
Что-то вроде:
img {
-webkit-transition: all 5s ease;
-moz-transition: all 5s ease;
-o-transition: all 5s ease;
-ms-transition: all 5s ease;
transition: all 5s ease;
}
img:hover {
-webkit-filter: hue-rotate(333deg);
}
Но опять-таки это зависит от того, чего именно вы хотите достичь. Здесь, взгляните на этот короткий учебник, который я написал об изображениях и эффекте зависания. Возможно, в нем есть идеи, и вы можете играть с примерами в своем браузере, так как они размещены на кодепене.
http://fivera.net/simple-cool-live-examples-image-hover-css-effect/
after the mouse is moved off
я думаю, что это не будет работать, как задумано.when the mouse hovers