Как заставить текстовый контент исчезать при наведении, используя только CSS? ⇐ CSS

[Гость]

Мне пришлось сгенерировать 6 случайных цветов и показать RGB и шестнадцатеричный код с текстовым содержимым в каждом прямоугольнике с помощью JavaScript. Эта часть сделана. Теперь мне нужно, чтобы они появлялись только при наведении курсора. У меня возникают трудности. Мне сказали, что это можно сделать, используя только CSS. Я новичок, поэтому, если возможно, помогите мне самым простым способом... спасибо.

function decimalToHex(decimalNumber){ пусть шестнадцатеричныйNumber = decimalNumber.toString(16); если (шестнадцатеричный номер.длина === 1) { вернуть '0' + шестнадцатеричный номер; } вернуть шестнадцатеричный номер; } let allSquares = document.querySelectorAll('.square'); let randomColorOne = document.querySelector('.square--one'); let randomColorTwo = document.querySelector('.square--two'); let randomColorThree = document.querySelector('.square--three'); let randomColorFour = document.querySelector('.square--four'); let randomColorFive = document.querySelector('.square--five'); let randomColorSix = document.querySelector('.square--six'); let btnRandom = document.querySelector('.btn--random'); функция getColors(){ let red = Math.round(Math.random() * 255); let green = Math.round(Math.random() * 255); let blue = Math.round(Math.random()*255); пусть redHexa = decimalToHex(красный); пусть greenHexa = decimalToHex (зеленый); пусть blueHexa = decimalToHex (синий); let fullRgbColor = 'rgb('+ красный +', ' + зеленый + ', ' + синий +')'; let fullHexaColor = '#' + redHexa + greenHexa + blueHexa; вернуть [fullRgbColor, FullHexaColor]; } btnRandom.addEventListener('click', () => { for(пусть квадрат allSquares){ пусть цвета = getColors (); console.log(цвета [0]); Square.style.backgroundColor = цвета [0]; Square.textContent = 'HEX ' + цвета[1] + ' ' + цвета[0]; } }); for(пусть квадрат allSquares){ пусть цвета = getColors(); Square.style.backgroundColor = цвета [0]; Square.textContent = 'HEX ' + цвета[1] + ' ' + цвета[0]; .square{ высота: 900 пикселей; ширина: 500 пикселей; цвет фона: черный; граница: 5 пикселей, сплошная белая;; дисплей: гибкий; оправдание-содержание: центр; выровнять-элементы: по центру; размер шрифта: 20 пикселей; семейство шрифтов: «Franklin Gothic Medium», «Arial Narrow», Arial, без засечек; } .btn--случайный{ ширина: 10%; отступ: 20 пикселей; дисплей: гибкий; гибкое направление: столбец; выровнять-элементы: по центру; оправдание-содержание: пространство между; поле сверху: 20 пикселей; поле слева: 45%; размер шрифта: 30 пикселей; семейство шрифтов: «Franklin Gothic Medium», «Arial Narrow», Arial, без засечек; белый цвет; цвет фона: тёмно-голубой; курсор: указатель; } .квадрат{ цвет: прозрачный; } .square:наведите{ Документ Генератор цветов Прикоснитесь к бутону, чтобы создать ваши цвета. СЛУЧАЙНО