如何仅使用CSS和惯用字体在悬停时显示div？

受此启发，我正在尝试仅使用CSS但通过TypeStyle显示div。对于

cssRaw

函数来说，这是一件微不足道的事情。但是，我该如何使用惯用的字体呢

下面是我所做的最接近的测试。当鼠标悬停在父div上时，我无法确定如何正确覆盖showme显示

const showme=style({
显示：“无”
});
const showhim=风格({
$nest：{
“&：悬停”：{
颜色：“红色”，
显示：“块”
}
}
});
cssRaw(`
.showme{
显示：无；
}
.秀给他看：悬停，秀给我看{
颜色：#ff0000；
显示：块；
}
`);
RawCss
按钮
内容

字体
按钮
内容

只需在悬停中使用另一个$nest即可

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>

const showme=style({
显示：“无”，
});
const showhim=风格({
$nest：{
“&：悬停”：{
颜色：“红色”，
显示：“块”，
$nest：{
“.showMe”：{
显示：“块”，
},
},
},
},
});
字体
按钮
内容

只需在悬停中使用另一个$nest即可

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>

const showme=style({
显示：“无”，
});
const showhim=风格({
$nest：{
“&：悬停”：{
颜色：“红色”，
显示：“块”，
$nest：{
“.showMe”：{
显示：“块”，
},
},
},
},
});
字体
按钮
内容