Board Thread:General Coding Help/@comment-31714129-20170613011129

Copy/paste from a thread that suggested I post here:

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 (or JS if necessary) 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 