How do I show a div on hover using only CSS and idiomatic TypeStyle?

Question

Inspired by this answer I am attempting to show a div using only CSS but via TypeStyle. With the cssRaw function this is trivial. But, how would I do this in idiomatic TypeStyle?

The closest I have managed is show below. I have not been able to determine how to properly override the showme display when hovering over the parent div.

Live sample:

const showme = style({
  display: "none"
});

const showhim = style({
  $nest: {
    '&:hover': {
      color: "red",
      display: "block"    
    }
  }
});

cssRaw(`
  .showme{ 
     display: none;
  }
  .showhim:hover .showme{
    color: #ff0000;
    display : block;
  }
 `);

<div>
  <div className="showhim">
    <div>
      <div>RawCss</div>
      <div className="showme">Button</div>
    </div>
    <div>Content</div>
  </div>
  <p>&nbsp;</p>
   <div className={showhim}>
    <div>
       <div>TypeStyle</div>
       <div className={showme}>Button</div>
    </div>
    <div>Content</div>
  </div>
</div>

Answer 1

Just use another $nest within the hover

const showme = style({
           display: 'none',
         });


        const showhim = style({
           $nest: {
             '&:hover': {
               color: 'red',
               display: 'block',
               $nest: {
                 '.showMe': {
                   display: 'block',
                 },
               },
             },
           },
         });


        <div>
           <div className={showhim}>
             <div>
               <div>TypeStyle</div>
               <div className={showme + ' showMe'}> Button</div>
               <div>Content</div>
             </div>
          </div>
       </div>