Как менять изображение при наведении на наименование?

Question

[komolov-87]

Есть каталог товаров и товары.

<div class="products">
    <div class="all-image"></div>
    <ul>
        <li>
            <span class="name">{$product->name}<span>
            <span class="image"><img src="{$product->image}"/><span>
        </li>
        <li>
            <span class="name">{$product->name}<span>
            <span class="image"><img src="{$product->image}"/><span>
        </li>
        <li>
            <span class="name">{$product->name}<span>
            <span class="image"><img src="{$product->image}"/><span>
        </li>
    </ul>
</div>

Мне нужно, чтобы Фото товаров выводилось в одном места и менялось при наведении курсора на название товаров.
Сейчас все Фото абсолютным позиционированием выставил в одном месте (получается друг на друге).

Скриптом, при наведении на название, image добавляется класс hover, но получается при наведении на любой товар, hover добавляется.

<script>
$(document).ready(function(){
$('.name').hover(function(){
    $('.image').addClass('hover');
},
function(){
    $('.image').removeClass('hover');
}
);
});
</script>

У товара есть id и думал, чтобы сделать у каждого товара классы уникальные, делаю так:

<span class="name-{$product-id}">{$product->name}<span>
<span class="image-{$product-id}"><img src="{$product->image}"/><span>

В идеале нужно, чтобы при наведении изображение менялось в блоке all-image
Как можно добавить в скрипт данные уникальные стили, чтобы это все работало?
Или может есть более правильный или простой вариант.
Буду рад выслушать более опытное мнение.

Answer 1

[uncletobe]

Я так понял, Вы хотите сделать так:
https://jsfiddle.net/0Ls7q4hy/

Comments

[komolov-87]

Скажите, пожалуйста, а как к данному решению добавить еще 2 панкта:
1. Чтобы {$product->name} был ссылкой, то есть {$product->name}
2. Чтобы в по умолчанию было фото первой li, а далее менялся при наведении
А так решение то, что нужно!

[uncletobe]

komolov-87, https://jsfiddle.net/89vwetq2/
Если не получается с первым элементом массива(для фото по умолчанию), то используйте js
https://jsfiddle.net/6c38g4bp/1
я там дополнил

[komolov-87]

uncletobe, Все отлично! Спасибо Вам большое!

[uncletobe]

komolov-87, пожалуйста.

Answer 2

[Niriter Inc.]

1-й вариант: https://codepen.io/korobochka/pen/ZEEoBLa
2-й вариант: https://codepen.io/korobochka/pen/YzzLpVb
с jquery вариант предложили выше

Answer 3

[komolov-87]

Вариант uncletobe https://jsfiddle.net/6c38g4bp/1то, что нужно, но возникло обстоятельство, а если таких блоков несколько

<div class="products">
тоже самое содержание
</div>
<div class="products">
тоже самое содержание
</div>

По текущему коду он выводит, но смена картинок происходит у всех блоков, независимо от того, в каком блоке навели курсор.