function textHighlight(str1, str2) {
str1 = str1.text;
str2 = str2.text;
str1 = str1.split(" ");
let str = str1.map(subStr => {
if (str2.includes(subStr)) {
return `<span onmouseout=\"this.style=''; \" onMouseOver=\"this.style = 'color:blue'\">${subStr}</span>`;
} else {
return subStr;
}
});
return str.join(" ");
}
var foundQuestion = findQuestion('"' + eachQuestion.textContent + '"'); // Возвращает вопрос в виде строки string
eachQuestion.innerHTML = textHighlight(eachQuestion,foundQuestion); // Делает подсветку слов в eachQuestion
Однако в этом коде делается подсветка при наведении на каждое слово, а мне нужно так:
При наведении на блок, подсвечивались все встречаемые слова (а не каждое по отдельности)
Вабще я придумал вот что: Присвоить класс всем нужным span элементам:
return `<span class="podsvetka">${subStr}</span>`;
Однако я столкнулся с такой проблемой, что мне нужно стили присваивать прямо в Javascript-коде То есть мне нужно выбрать из элемента eachQuestion все элементы с классом .podsvetka и установить им style="color:blue"
Помогите
UPD
- Мне нужно повесить события onMouseOver и onMouseOut на eachQuestion
- При наведении на блок eachQuestion менялись бы цвета у блоков с классом podsvetka (style='color:blue')
element.style.color = 'red'
?learn.javascript.ru/styles-and-classes – Михаил Камахин 10 янв '20 в 7:30