Ховер на jquery?

Question

[Иван Лыков]

Доброго времени суток, у меня вопрос, подскажите, как сделать так что б при на ведении на определенный элемент менялась картинка на другом блоке. Хочу сделать что б когда юзер навел на категорию к примеру, выпfдала картинка которая коротко будет описывать категорию. И так на каждой что было. C одной я б сделал, но вот если их несколько. Как под каждую категорию привязать свою картинку
Вот наглядная картинка

Answer 1

[kulaeff]

Допустим, у вас три категории. Нужно связать картинки с категориями с помощью data атрибутов, а затем, при наведении на категорию показывать связанную картинку. Примерно так:

Картинки:

<img src="blabla.jpg" data-category="1" />
<img src="blabla.jpg" data-category="2" />
<img src="blabla.jpg" data-category="3" />

Категории:

<span class="category" data-id="1">Яблоко</span>
<span class="category" data-id="2">Банан</span>
<span class="category" data-id="3">Лимон</span>

Код:

$('.category').hover(
  function() {
    $('img[data-category="' + $(this).data('id') + '"]').css('display', 'block')
  },
  function() {
    $('img[data-category="' + $(this).data('id') + '"]').css('display', 'none')
  }
)

Вместо .css('diplay', 'block/none') можно использовать .addClass('active') и .removeClass('active').

Comments

[Иван Лыков]

а если я хочу блок вывести с инфой. Там картинка и текст + кнопка на сингл... В место тега "img" (в коде) вписывать класс который был задан блоку?

[kulaeff]

Jhon_Light, вместо картинки может быть что угодно, в том числе и блок с картинкой, текстом и кнопкой. Главное связать этот блок с категорией.

[Иван Лыков]

Огромное спасибо!
Хорошего вам время проведения!

[Иван Лыков]

Прошу прощения, но у меня еще одни вопрос назрел... Я сделал все как нужно, но не сделал одного...
Суть в чем, как мне сделать что после сброса ховера оставалась та картинка с которой произошел сброс. А то щас она просто исчезает ничего не оставляя, только фон...
за ранее спасибо.

[kulaeff]

Jhon_Light, в таком случае надо использовать не hover, а mouseenter. Как то так:

$('.category').on('mouseenter', function() {
  $('img').css('display', 'none');
  $('img[data-category="' + $(this).data('id') + '"]').css('display', 'block');
})

[Иван Лыков]

kulaeff, Благодарю

Answer 2

[Артур Карапетян]

$('selector').hover(function(){...}, function(){...})
Где 1 функция то, что выполняется при наведении, а 2 функция то, что выполняется при отведении

Answer 3

[fasnet]

Делаете img, который должен выпадать скрытым (display:none) и при hover он должен появляться(display:block).