我必须生成 6 种随机颜色，并使用 JavaScript 在每个矩形上显示带有 texcontent 的 RGB 和十六进制代码。那部分已经完成了。现在我必须让它们仅在悬停时出现。我有困难。有人告诉我只使用 CSS 就可以做到这一点。我是初学者，所以如果可能的话，请帮助我使用最简单的方法...谢谢
function decimalToHex(decimalNumber){
let hexadecimalNumber = decimalNumber.toString(16);
if(hexadecimalNumber.length === 1){
return '0' + hexadecimalNumber;
}
return hexadecimalNumber;
}
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');
function getColors(){
let red = Math.round (Math.random() * 255);
let green = Math.round (Math.random() * 255);
let blue = Math.round(Math.random()*255);
let redHexa = decimalToHex(red);
let greenHexa = decimalToHex(green);
let blueHexa = decimalToHex(blue);
let fullRgbColor = 'rgb('+ red +', ' + green + ', ' + blue +')';
let fullHexaColor = '#' + redHexa + greenHexa + blueHexa;
return [fullRgbColor, fullHexaColor];
}
btnRandom.addEventListener('click', () => {
for(let square of allSquares){
let colors = getColors ();
console.log(colors [0]);
square.style.backgroundColor = colors[0];
square.textContent = 'HEX ' + colors[1] + ' ' + colors[0];
}
});
for(let square of allSquares){
let colors = getColors();
square.style.backgroundColor = colors[0];
square.textContent = 'HEX ' + colors[1] + ' ' + colors[0];
}.square{
height: 900px;
width: 500px;
background-color: black;
border: 5px solid white;;
display: flex;
justify-content: center;
align-items: center;
font-size: 20px;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}
.btn--random{
width: 10%;
padding: 20px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
margin-top: 20px;
margin-left: 45%;
font-size: 30px;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
color: white;
background-color: darkcyan;
cursor: pointer;
}
.square{
color: transparent;
}
.square:hover{
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css"/>
<script src="app.js" defer></script>
<title>Document</title>
</head>
<body>
<header>
<h1>Générateur de couleurs</h1>
</header>
<h2>Appuyez sur le bouton pour générer vos couleurs.</h2>
<main class="main_container">
<div class="square square--one hover"></div>
<div class="square square--two hover"></div>
<div class="square square--three hover"></div>
<div class="square square--four hover"></div>
<div class="square square--five hover"></div>
<div class="square square--six hover"></div>
</main>
<button class="btn--random">RANDOM</button>
</body>
</html>你可以这样做，在这种情况下我希望标题将在悬停时显示
header{
opacity:0;
}
header:hover{
opacity: 1;
}