Visibility change on hover using CSS variable

Question

I have two html elements. The second element is hidden. But when hovering on first element the second one will be visible. These are two separate elements not linked. I'm trying to do this using css variables. On hover it's not getting visible.

CSS

#copyright-ft
{
    position: absolute; 
    overflow: visible; 
    font-family: roboto, cus-roboto, sans-serif; 
    font-size: 70px; 
    padding-left: 25px; 
    padding-right: 22px; 
    color: rgba(0,0,0,0.45); 
    border: 4px rgba(236,96,202,0.24) solid; 
    border-radius: 80px; 
    top: 14px; 
    left: 25px; 
    padding-top: 10px; 
    padding-bottom: 7px;
}
#copyright-ft-details
{
    position: absolute; 
    overflow: visible; 
    font-family: roboto, cus-roboto, sans-serif; 
    font-size: 40px; 
    padding-left: 35px; 
    padding-right: 35px; 
    color: rgba(255,255,255,0.7); 
    border: 0px rgba(236,96,202,0.24) solid; 
    border-radius: 10px; 
    top: 325px; 
    left: 120px; 
    padding-top: 15px; 
    padding-bottom: 15px;
    background: rgba(0,0,0,0.7);
    visibility: var(--copy-vsb);
    --copy-vsb: hidden;
}
#copyright-ft:hover
{
    --copy-vsb: visible;
}

HTML

<span id="copyright-ft"> <p>&copy;</p> </span>
<div id="copyright-ft-details">
    <span> elomymelo.com </span>
</div>

Can I do this with css without javascript event?

Answer 1

You can use the General Sibling Combinator ~ to target the id you want to display on hovering your other ID.

#copyright-ft {
  position: absolute;
  overflow: visible;
  font-family: roboto, cus-roboto, sans-serif;
  font-size: 70px;
  padding-left: 25px;
  padding-right: 22px;
  color: rgba(0, 0, 0, 0.45);
  border: 4px rgba(236, 96, 202, 0.24) solid;
  border-radius: 80px;
  top: 14px;
  left: 25px;
  padding-top: 10px;
  padding-bottom: 7px;
  cursor: pointer;
}

#copyright-ft-details {
  position: absolute;
  overflow: visible;
  font-family: roboto, cus-roboto, sans-serif;
  font-size: 40px;
  padding-left: 35px;
  padding-right: 35px;
  color: rgba(255, 255, 255, 0.7);
  border: 0px rgba(236, 96, 202, 0.24) solid;
  border-radius: 10px;
  top: 325px;
  left: 120px;
  padding-top: 15px;
  padding-bottom: 15px;
  background: rgba(0, 0, 0, 0.7);
  visibility: hidden;
}

#copyright-ft:hover~#copyright-ft-details {
  visibility: visible;
}

<span id="copyright-ft">
    <p>&copy;</p>
  </span>
<div id="copyright-ft-details">
  <span> elomymelo.com </span>
</div>