如何使用 javascript 在鼠标悬停时更改文本颜色？答案

【问题标题】：How to use javascript to change text color on mouse hover?如何使用 javascript 在鼠标悬停时更改文本颜色？
【发布时间】：2019-07-31 16:52:00
【问题描述】：

我正在为雪锥架创建一个网站，并希望为他们的风味列表创建一个很酷的效果。我很好奇如何处理这个问题。当我将鼠标悬停在文本上时，我想为鼠标输入设置一个事件监听器，它可以缩放文本并根据现实生活中的水果用正确的颜色填充文本。如何在不为每种风味创建变量的情况下最好地实现这一目标？（我有在 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);


})();

【问题讨论】：

你能把 HTML 和 CSS 也给我们吗？
我不会将此作为答案发布，因为您要求使用 JS，但您可以为此创建一个伪类。即 .apple:hover{font-size: 50em; color: blue;} 如果原始类是 .apple{font-size: 10em; color: red; transition: .25s} 将起作用。如果你想要这个作为答案，请告诉我。

标签： javascript html css sass

【解决方案1】：

这不是 JS，但可以使用 CSS 伪类 :hover 轻松解决。

如果.apple类是.apple{font-size: 10em; color: red; transition: .25s}，那么你可以创建一个伪类.apple:hover{font-size: 50em; color: blue;}来做动画。

【讨论】：