Наведите курсор мыши изменить цвет изображения

Question

У меня большая сетка изображений.Когда пользователь наводит курсор мыши на изображение, я хочу, чтобы оно окрасилось в синий цвет 0000FF.Есть ли способ сделать это в JS или JQuery?В идеале мне не пришлось бы применять класс к каждому изображению.Эта процедура должна повлиять на все изображения на экране.

После поиска по форумам здесь и в других местах я узнал, что некоторые люди используют div над изображением, которое имеет цвет и непрозрачность, но как мне применить это ко всем изображениям??

Еще одна вещь, которую я продолжаю видеть, это paintbrushJS и pixastic, но я не знаю, как заставить их работать для этой цели.

Вот страница, над которой я работаю: http://www.rollinleonard.com/elements/

РЕДАКТИРОВАТЬ: изображения должны быть кликабельны, чтобы div не мог помешать связанному img.Есть ли способ щелкнуть через div или поместить внизу div или что-то еще?Некоторые предлагаемые решения не используют div, но я не могу их понять.

Спасибо!Rollin

Answer 1

Вот как ты захочешь это сделать: http://jsfiddle.net/ztKJB/1/

Javascript / jQuery:

$overlay = $('#overlay');

$('img').bind('mouseenter', function () {
    $this = $(this);
    if ($this.not('.over')) {
        $this.addClass('over');
        $overlay.css({
            width  : $this.css('width'),
            height : $this.css('height'), 
            top    : $this.offset().top + 'px',
            left   : $this.offset().left + 'px',
        }).show();
    }
}).bind('mouseout', function () {
    $(this).removeClass('over');
});

CSS:

#overlay {
    display: block;
    position: absolute;
    background-color: rgba(0, 0, 255, 0.5);
    top: 0px;
    left: 0px;
    width: 0px;
    height: 0px;
}

HTML:

<div id="overlay"></div>
<img src="http://www.rollinleonard.com/elements/zzzthumbs/JPEG/rgb-dots-olan3.jpg" width="150" height="150">
<img src="http://www.rollinleonard.com/elements/zzzthumbs/JPEG/rgb-dots-olan2.jpg" width="150" height="150">
<img src="http://www.rollinleonard.com/elements/zzzthumbs/JPEG/IMG_3291.jpg" width="225" height="150">
<img src="http://www.rollinleonard.com/elements/zzzthumbs/JPEG/1153-1188.jpg" width="200" height="150">
<img src="http://www.rollinleonard.com/elements/zzzthumbs/JPEG/P1010036.jpg" width="200" height="150">
<img src="http://www.rollinleonard.com/elements/zzzthumbs/JPEG/dressRehearsal.jpg" width="267" height="150">
<img src="http://www.rollinleonard.com/elements/zzzthumbs/JPEG/sinWave.jpg" width="225" height="150"
<img src="http://www.rollinleonard.com/elements/zzzthumbs/JPEG/mockUp2.jpg" width="225" height="150">
<img src="http://www.rollinleonard.com/elements/zzzthumbs/JPEG/PICT0453.jpg" width="113" height="150">

Answer 2

Вы можете найти ответ здесь jQuery: есть ли способ применить цвет (оттенок) к изображению?

Answer 3

Добавьте span внутри каждого якоря и настройте его непрозрачность при наведении:

<script>
$(function() {
    $('a').each(function() {
        $(this).appendChild('<span class="overlay" />');
    });
});
</script>

<style>    
    a {
        position: relative;
    }

    a .overlay {
        background-color: #00f;
        height: 100%;
        left: 0px;
        opacity: 0;
        position: absolute;
        top: 0px;
        width: 100%;
    }

    a:hover .overlay {
        opacity: 0.4; /* adjust to suit */
    }
</style>

Примечание. Вам необходимо настроить стили таким образом, чтобы привязки обрабатывались float, а не изображениями.

Если вы хотите добавить / исчезнуть, вы можете использовать CSS3 переходы или скрыть span изначально и использовать событие наведения мыши jQuery, чтобы добавить его:

$('a').each(function() {
    $(this).appendChild($('<span class="overlay" />').hide()).hover(function() {
        $(this).find('.overlay').fadeIn(500);
    }, function() {
        $(this).find('.overlay').fadeOut(1000);
    });
});

Answer 4

Идея использования div над изображением будет работать.При необходимости вы можете сгенерировать div на лету (или сгенерировать скрытый div для повторного использования по всей странице) и разместить его над изображением во время события onmouseover:

$('img').mouseover(function() {
    // generate a div
    // position over current image
});

Answer 5

Этот плагин jquery должен делать то, что вы просили довольно хорошо.(tancolor.js)

$("#myImageID").tancolor({mode: "blue"});

Есть интерактивная демоверсия .Вы можете поиграть с ним.

Ознакомьтесь с документацией по использованию, это довольно просто. 1009 * Docs *