У меня есть повторяющееся фоновое квадратное изображение размером 89x89 пикселей, которое я хотел бы изменить на изображение произвольного цвета, когда мышь зависает

Question

У меня есть повторяющееся фоновое квадратное изображение размером 89x89 пикселей, которое я хотел бы изменить на изображение произвольного цвета, когда мышь зависает

0

Мне бы хотелось, чтобы текущее изображение меняло цвет и восстанавливало его после того, как мышь ушла с этого конкретного изображения.

Это приведет к созданию красивого многоцветного рисунка, поскольку мышь перемещается по повторяющимся изображениям.

Заранее благодарны за Вашу помощь. Скрипка была бы замечательной!

user2803171 22 сен. 2013, в 03:05

Источник

Теги:

jquery

html

css

background

image

2 ответа

Ещё вопросы

Joren · Answer 1 · 2013-09-21T21-55-00.000Z

Что-то вроде этого:

CSS

.foo {
    background: url('image1.png') repeat top left;
}

.foo:hover {
    background: url('image2.png') repeat top left;
}

HTML

<div class="foo"></div>

after the mouse is moved off я думаю, что это не будет работать, как задумано.
название ясно говорит, when the mouse hovers

Nikola Petrovic · Answer 2 · 2013-09-22T01-12-00.000Z

Хм. Я бы использовал фильтр 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/