我必须生成 6 种随机颜色，并使用 JavaScript 在每个矩形上显示带有文本内容的 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;
}
这样：在
background-color上显示
:hover
（我本以为答案早就在这里出现了）
const
allSquares = document.querySelectorAll('.square')
, btnRandom = document.querySelector('.btn--random')
, n256r =_=> 0|Math.random()*256
, hexa =n=> n.toString(16).padStart(2,'0')
, choosedColors = []
;
btnRandom.addEventListener('click', () =>
{
let r,g,b,rgb,hex;
choosedColors.length = 0;
for(let square of allSquares)
{
do {
r = n256r();
g = n256r();
b = n256r();
hex = `#${hexa(r)}${hexa(g)}${hexa(b)}`;
rgb = `rgb(${r},${g},${b})`;
}
while( choosedColors.includes(hex) ); // avoid duplicate colors
choosedColors.push(hex);
square.style.setProperty('--bgColor', hex );
square.innerHTML = rgb + '<br>' + hex ;
}
})body {
font-family : 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
font-size : 16px;
}
.main_container {
background-color : lightslategray;
display : flex;
flex-wrap : wrap;
flex-direction : row;
align-content : flex-start;
gap : 10px;
padding : 10px;
}
.square {
--bgColor : white;
width : 100px;
height : 100px;
color : black;
background-color : white;
padding : 1em;
border : 1em white 1em;
line-height : 1.4em;
}
.square:hover {
background-color : var(--bgColor);
}
.btn--random {
padding : 20px;
margin : 20px auto;
font-size : 30px;
color : white;
background-color : darkcyan;
cursor : pointer;
}<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"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
</main>
<button class="btn--random">RANDOM</button>