Better section edit links for Wikipedia

README.md

Copy/paste these into your common.js and common.css in Wikipedia.

This script will display section edit links in a more noticeable way upon hover. The section you're actually editing will be highlighted as well.

Note: This is a poorly done hack. A better solution is forthcoming.

common.css

.invisible {
    visibility: hidden;
}

a.sectionedit {
    padding: 3px 4px;
    margin: 0 0 0 1em;
    color: #252525;
    text-decoration: none;
    font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif;
    font-size: 11px;
    font-weight: normal;
    background-color: #d9d9d9;
    border-radius: 3px;
    opacity: 0.6;
}

a.sectionedit:hover {
    opacity: 1.0;
}

a.sectionedit:active {
    background-color: #c9c9c9;
}

a.sectionedit img {
    width: 10px;
    height: 10px;
    padding-right: 4px;
}
​

common.js

$(document).ready(function () {
 
    // Hide existing edit links and place new ones, invisibly
    $('span.editsection').each(function (i, el) {
        var link = $(this).find('a').attr('href');
        $(this).parent().append('<a class="sectionedit invisible" href="' + link + '"><img src="http://i.imgur.com/1pKvP.png" />Edit section</a>');
        $(this).hide();
    });
 
    // Apply hover states to article content
    $('#mw-content-text').find(':header').each(function (i, el) {
 
        // Hover state for headers
        $(this).on('hover', function () {
            $(this).find('a.sectionedit').toggleClass('invisible');
        });
 
        // Hover state for content
        $(this).nextUntil(':header').on('hover', function () {
            $($(this).prevAll(':header')[0]).find('a.sectionedit').toggleClass('invisible');
        });
    });
 
    // Hover state for sections
    $('a.sectionedit').on('mouseover', function() {
        var $parent = $(this).parent(),
              parentTag = ($parent.prop('tagName') + '').toLowerCase();
 
        $parent.nextUntil(parentTag).add($parent).css({ 'background-color' : '#FCFCE1' });
    });
    $('a.sectionedit').on('mouseout', function() {
        var $parent = $(this).parent(),
              parentTag = ($parent.prop('tagName') + '').toLowerCase();
 
        $parent.nextUntil(parentTag).add($parent).css({ 'background-color' : '#ffffff' });
    });
 
});