javascript - 如何使用 javascript 在鼠标悬停时更改文本颜色?
问题描述
我正在为雪锥架创建一个网站,并希望为他们的风味列表创建一个很酷的效果。我很好奇如何处理这个问题。当我将鼠标悬停在文本上时,我想为鼠标输入设置一个事件监听器,它可以缩放文本并根据现实生活中的水果用正确的颜色填充文本。在不为每种风味创建变量的情况下,如何最好地实现这一点?(我有在 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);
})();
解决方案
这不是 JS,但可以使用 CSS 伪类轻松解决:hover
。
如果类.apple
是.apple{font-size: 10em; color: red; transition: .25s}
,那么你可以制作一个伪类.apple:hover{font-size: 50em; color: blue;}
来做动画。
推荐阅读
- python - 本地主机上的 Django“禁止(CSRF cookie 未设置。)”:8000
- python - 在熊猫数据框中拆分行
- javascript - 如何将无限变色文本的颜色慢慢过渡到一种纯色?
- reactjs - 使用 Material UI 进行 ReactJS 动态表单验证
- java - 如何使用 Fluent 等到可点击 - Selenium
- routing - 嵌套类别的路由,生成url路径
- c# - 在 C#/VB 中使用 ImageMagick 将注释水平居中但垂直设置位置
- timer - STM32L0 访问 GPIO 的 DMA 限制
- java - 子更改时如何更新根实体上的 modified_at 列?
- amazon-web-services - 删除 S3 存储桶