Как использовать JavaScript для изменения цвета текста при наведении курсора мыши?

Question

Я создаю веб-сайт для снежного конуса и хочу создать крутой эффект для их списка ароматов. Мне интересно, как подойти к этому вопросу. При наведении курсора на текст я хотел бы настроить прослушиватель событий для ввода мышью, который масштабирует текст и заполняет текст правильным цветом на основе реальных фруктов. Как я могу лучше всего достичь этого, не создавая переменную для каждого аромата? (У меня есть все цветовые классы, созданные в css)

var flavorAdder = (function() {

var flavorArr1, flavorArr2, flavorArr3, flavorArr4, textLocator1, textLocator2, textLocator3, textLocator4, addToPage;

flavorArr1 = [
    '<p>Apple</p>',
    '<p>Banana</p>',
    '<p>Birthday Cake</p>',
    '<p>Black Cherry</p>'
];

flavorArr2 = [
    '<p>Green Apple</p>',
    '<p>Guava</p>',
    '<p>Honeydew Melon</p>',
    '<p>Huckleberry</p>'
];

flavorArr3 = [
    '<p>Peach</p>',
    '<p>Piña Coloda</p>',
    '<p>Pineapple</p>',
    '<p>Pink Grapefruit</p>'
];

flavorArr4 = [
    '<p>Pink Lemonade</p>',
    '<p>Red Raspberry</p>',
    '<p>Rootbeer</p>'
];

textLocator1 = document.querySelector('#flavorList1');
textLocator2 = document.querySelector('#flavorList2');
textLocator3 = document.querySelector('#flavorList3');
textLocator4 = document.querySelector('#flavorList4');


addToPage = function(arr, text) {
    arr.forEach(function(current) {
        text.insertAdjacentHTML('beforeend', current);
    });
}

addToPage(flavorArr1, textLocator1);
addToPage(flavorArr2, textLocator2);
addToPage(flavorArr3, textLocator3);
addToPage(flavorArr4, textLocator4);


})();

Answer 1

Это не JS, но его легко решить с помощью псевдокласса CSS :hover.

Если класс .apple равен .apple{font-size: 10em; color: red; transition: .25s}, то вы можете сделать псевдокласс .apple:hover{font-size: 50em; color: blue;} длясделать анимацию.