Visibility change on hover using CSS variable-CodePudding

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?

CodePudding user response：

This is similar to a tooltip. You don't need to use a CSS variable. Here's the code:

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

CodePudding user response：

From MDN:

Custom properties are scoped to the element(s) they are declared on, and participate in the cascade: the value of such a custom property is that from the declaration decided by the cascading algorithm.

So I guess you can't alter the "global" variable even if you declare it on :root or body first; #copyright-ft:hover{--copy-vsb} may just make a local variable with the same name (notice the example in the MDN document).

CSS selectors mostly works only in descendant direction: from parent to child and from first child to last child. So if your #copyright-ft-details is ALWAYS a late sibling and/or child of #copyright-ft, you can try something like this:

#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: hidden;
}
#copyright-ft:hover ~ #copyright-ft-details,/* late sibling */
#copyright-ft:hover #copyright-ft-details,/* child */
#copyright-ft:hover ~ * #copyright-ft-details/* late sibling and child */
{
    visibility: visible;
}

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

CodePudding user response：

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>