Template:Skill: Difference between revisions

@@ Line 2: / Line 2: @@
 {{#if:{{{name|}}}|
 <div style="position:relative; display:inline-block; width:220px; height:80px; margin-left:10px;">
-   <!-- Main skill box (your gray box) -->
+   <!-- Skill box -->
    <div style="background-color:#191919; border:3px solid #4d4d4b; width:100%; height:100%; display:flex; align-items:center; justify-content:center; color:white; box-sizing:border-box;">
      {{{name}}}
@@ Line 8: / Line 8: @@
    <!-- Tooltip box -->
-   <div style="visibility:hidden; position:absolute; top:0; left:230px; width:200px; background-color:#222; color:white; border:2px solid #4d4d4b; border-radius:5px; padding:5px; box-sizing:border-box;">
+   <div style="display:none; position:absolute; top:0; left:230px; width:200px; background-color:#222; color:white; border:2px solid #4d4d4b; border-radius:5px; padding:5px; box-sizing:border-box;">
      {{{description|Hover for description}}}
    </div>
-   <!-- Invisible overlay to trigger hover -->
+   <!-- Pure CSS hover -->
    <div style="position:absolute; top:0; left:0; width:100%; height:100%;"
-        onmouseover="this.parentNode.querySelector('div:nth-child(2)').style.visibility='visible'"
+        onmouseenter="this.nextElementSibling.style.display='block'"
-        onmouseout="this.parentNode.querySelector('div:nth-child(2)').style.visibility='hidden'">
+        onmouseleave="this.nextElementSibling.style.display='none'">
    </div>
 </div>
 |}}

Revision as of 21:29, 30 August 2025