Ролловеры jQuery с использованием нескольких идентификаторов и классов

Вы можете добавить «тип» изображения как класс. Например, яблоко будет:

<img src='' class='apple fruit red' />

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

Затем добавьте следующий обработчик:

$(".apple").mouseover(function() {
   $(".apple").addClass("overState");
});

Вам нужно определить в своем CSS overState. При наведении курсора вы должны удалить класс.

Если это ссылки (тег привязки), для этого вам не нужен jQuery. Вы можете использовать: hover в CSS.

a.apple:hover img {
  /* whatever you want to change here */
}

Обновлено: игнорируйте меня. Это не изменит все элементы яблока на странице одновременно. Это то, что я получаю за то, что просматриваю ТАК поздно ночью, когда хочу спать.

Итак, у каждого изображения есть несколько тегов (например: «яблоко», «красный», «большой»), и когда вы наводите указатель мыши на большое красное яблоко, вы хотите, чтобы все остальные яблоки, большие и красные предметы загорались?

Как предложил Кгианнакакис, я бы поместил эти данные в атрибут class изображения - с той лишь разницей, что я бы поставил перед каждым классом что-то, чтобы вы не конфликтовали с другими классами на своей странице.

<img src = "the-big-red-apple.jpg" class = "tagged tag-big tag-red tag-apple" />

Я также добавил туда дополнительный класс, названный «tagged», чтобы вы могли отличить помеченные фотографии от навигационных изображений или чего-то еще.

$('img.tagged')
    .each(function() {
        var thisClasses = this.className.split(/s+/); // array of classes.
        var search = [];
        for (var i = 0; i < thisClasses.length; ++i) {
            if (thisClasses[i].substr(0, 4) == "tag-") {
                search.push("." + thisClasses[i]);
            }
        }
        $(this).data("tags", search.join(","));  // ".tag-big,.tag-red,.tag-apple"
    })
    .hover(function() {
        $('img.tagged')
            .filter(this.data('tags'))
            .addClass("highlight")
        ;
    }, function() {
        $('img.tagged')
            .filter(this.data('tags'))
            .removeClass("highlight")
        ;
    })
;

Сначала выполняется цикл по всем вашим изображениям с тегами и выясняется, какие теги есть на каждом из них, и сохраняется это в data () этого элемента. Это означает, что нам нужно делать это только один раз, а не каждый раз.

Затем он добавляет событие парить к каждому изображению с тегами, чтобы найти все, что соответствует любому из тегов этого изображения, и добавить класс «выделения». Точно так же он удаляет класс при наведении курсора мыши.

Изменить источник изображения

Этот метод фактически изменяет источники изображений единообразно, а не просто применяет к ним класс.

function swapImageGroup(imgSelector,suffix){
if (suffix == null) {suffix = "-hover";}
//imgSelector is the jQuery selector to use
//both imgSelector and suffix must be strings
$(selector).hover(
   function() {
      $(selector).each(function(){
      //store ".jpg" or ".png" or whatever as fileExtension
      var fileExtension = $(this).attr("src").substr($(this).attr("src").lastIndexOf("."));
      //replace something like ".jpg" with something like "-hover.jpg",
      //assuming suffix == "-hover"
      $(this).attr("src", $(this).attr("src").replace(fileExtension, suffix + fileExtension));
    });
    },
    function() {
      $(selector).each(function(){
      //chop off the end of the filename, starting at "-hover" (or whatever)
      //and put the original extension back on
      $(this).attr("src", $(this).attr("src").split(suffix + ".").join("."));
      });
    }
);
}

Итак, вы бы использовали такую ​​функцию:

swapImageGroup("img.apple");

или же

swapImageGroup("img.foo","-active");