Board Thread:Support Requests - Designing Your Wiki/@comment-31714129-20170610202807

I want to make it so that the "Edit" link next to each header only appears when the header is hovered over. I can get the actual appearing/disappearing to work with this code:

.editsection{ opacity:0; transition:.5s; }   .editsection:hover, .mw-headline:hover ~ .editsection, .mw-header-link:hover ~ .editsection{ opacity:1; transition:.5s; }

My problem is that with that code it only works if I hover over the link itself or the text of the header, not the entire line. I'm using a JS plugin called HeaderLinks that adds an icon at the end of a header line no matter where in the header you mouse over, which means that there's often an issue where the icon appears but the edit link does not.

How do I duplicate this effect in CSS to make it so the reveal effect for the Edit link is triggered by hovering over any part of the header line?

Site: Hollow Knight Wiki 