Javascript-форум - Изменение текста при наведении

Javascript-форум (https://javascript.ru/forum/)

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - Изменение текста при наведении (https://javascript.ru/forum/misc/48535-izmenenie-teksta-pri-navedenii.html)

Изменение текста при наведении

Здравствуйте, уважаемые форумчане.
С jQuery имею дело недавно, поэтому прошу помощи. Есть такой код:

<span class="cvet_tovara">Орех</span>
<br>
<div class="img_tovara_1"><img src="/img/20a.jpg" width="38" height="38" alt="Орех" title="Орех"></div>
<div class="img_tovara_2"><img src="/img/19s.jpg" width="38" height="38" alt="Ольха" title="Ольха"></div>
<div class="img_tovara_3"><img src="/img/18d.jpg" width="38" height="38" alt="Кедр" title="Кедр"></div>

Таких блоков может быть 2, 3, 4, 5... Как видим, class="img_tovara_ тут цифра меняется".
Никак не могу сделать так, чтобы при наведении на определенный div в span изменялся текст с Орех на нужный, т.е. при наведении на второй блок изменялось на Ольха, при наведении на третий блок изменялось на Кедр и т.д.

Сделать получается, только если определенное количество блоков с определенными атрибутами. Но условия таковы, что блоков может быть любое количество с любыми атрибутами.

Простите, не в тот раздел разместил тему.

<span class="cvet_tovara">Орех</span>
<br>
<div class="img_tovara_1"><img src="/img/20a.jpg" width="38" height="38" alt="Орех" title="Орех"></div>
<div class="img_tovara_2"><img src="/img/19s.jpg" width="38" height="38" alt="Ольха" title="Ольха"></div>
<div class="img_tovara_3"><img src="/img/18d.jpg" width="38" height="38" alt="Кедр" title="Кедр"></div>
<script>
[].slice.call(document.querySelectorAll('[class ^= img_tovara_]')).forEach(function(node){ 
    node.onmouseenter = function() {
        document.querySelector('.cvet_tovara').innerHTML = this.querySelector('img').title;
    }
  });
</script>

Спасибо огромное.
Сейчас активной остается та надпись, на рисунок которой последней наводили указатель. А как сделать, чтобы после действий, надпись снова стала исходной?

BETEPAH,
больше похоже на костыль, чем на нормальное решение.

Цитата:

Сообщение от xformer

Сейчас активной остается та надпись, на рисунок которой последней наводили указатель

условия топика соблюдены вроде :) Можно, конечно, возвращать исходную надпись. Посмотрим вариант WorM32, потом доделаем.

<style>
.img_tovara {
  width: 38px; 
}
</style>
<span class="cvet_tovara">Орех</span>
<br>
<div class="img_tovara"><img src="/img/20a.jpg" width="38" height="38" alt="Орех" title="Орех"></div>
<div class="img_tovara"><img src="/img/19s.jpg" width="38" height="38" alt="Ольха" title="Ольха"></div>
<div class="img_tovara"><img src="/img/18d.jpg" width="38" height="38" alt="Кедр" title="Кедр"></div>

<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script>
(function () {
var cvetTovara = $('.cvet_tovara'),
    defaultCvet = cvetTovara.text();
$('.img_tovara')
  .on('mouseenter', function () {
    var cvet = $(this).find('img').attr('title');
    cvetTovara.text(cvet);
  })
  .on('mouseleave', function () {
    cvetTovara.text(defaultCvet); 
  });
})();
</script>

WorM32,
Вы изменили верстку и добавили 100 килобайтную библиотеку. А в остальном тот же костыль :)

Цитата:

Сообщение от BETEPAH (Сообщение 319975)

WorM32,
Вы изменили верстку

изменилось только имя класса, тк это чуть более правильно, чем есть.

Цитата:

Сообщение от BETEPAH (Сообщение 319975)

и добавили 100 килобайтную библиотеку.

ТС написал, что юзает jQuery изначально.

Цитата:

Сообщение от BETEPAH (Сообщение 319975)

А в остальном тот же костыль :)

в чем?)

Цитата:

Сообщение от WorM32

изменилось только имя класса, тк это чуть более правильно, чем есть.

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

Цитата:

Сообщение от WorM32

ТС написал, что юзает jQuery изначально.

Мы по-разному трактуем предложение "С jQuery имею дело недавно". Если что-то можно сделать без jQ, не раздувая при этом код, лучше делать без jQ.

Цитата:

Сообщение от WorM32

в чем?)

парирую вопросом: в чем отличие-то? ;) Почему там костыль, а здесь не костыль?

<span class="cvet_tovara" data-default="Орех">Орех</span>
<br>
<div class="img_tovara_1"><img src="/img/20a.jpg" width="38" height="38" alt="Орех" title="Орех"></div>
<div class="img_tovara_2"><img src="/img/19s.jpg" width="38" height="38" alt="Ольха" title="Ольха"></div>
<div class="img_tovara_3"><img src="/img/18d.jpg" width="38" height="38" alt="Кедр" title="Кедр"></div>
<script>
[].slice.call(document.querySelectorAll('[class ^= img_tovara_]')).forEach(function(node){ 
    var title = document.querySelector('.cvet_tovara');
    node.onmouseenter = function() {
        title.innerHTML = this.querySelector('img').title;
    }
    node.onmouseleave = function() {
        title.innerHTML = title.getAttribute('data-default');
    }
// это можно убрать, если не понадобится :)
    node.onclick = function() { 
        title.setAttribute('data-default', title.innerHTML = this.querySelector('img').title);
    }
  });
</script>