css Question posted in
Some basic documentation can be found here.

How to make textcontent disappear on hover using only css?

I had to generate 6 random colors and show the rgb and hex code with textcontent on each rectangles using JavaScript. That part is done. Now I have to make them appear only on hover. I am having difficulties. I have been told it is possible to do it using only CSS. I am a beginner so if possible, help me using the easiest way possible… thanks.

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>
Tags:

2

Answers


  1. 0

    you can do like this , in this case i want header will show on hover

    header{
opacity:0;
}
header:hover{
opacity: 1;
}
    Login or Signup to reply.
  2. 0

    this way: show background-color on :hover

    (I would have thought that an answer would have presented itself here long before)

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search